Features
Every tool for the web you see.
Aevilo brings a designer’s toolkit into the browser you already use. Try each part below on fictional demo pages; nothing here touches a real website.
Measured, not guessed.
Click any element on the page. The values are measured live from this browser, as Aevilo measures real pages.
Build with quiet confidence.
Precision tools for teams who care about every pixel.
Start buildingWatch the filmA live editor on any website.
Accent, corners, type and glass surfaces, with a before/after slider. The CSS updates as you go.
Build with quiet confidence.
Precision tools for teams who care about every pixel.
Start buildingWatch the filmBuild with quiet confidence.
Precision tools for teams who care about every pixel.
Start buildingWatch the film
Aevilo StylesAccent
Type
Glass
View
Generated CSS
Choreograph a page.
Pick an element, choose a preset, shape the start state and rearrange the timeline by dragging its bars.
Good evening
0.00 s
Changes in plain words.
A scripted walk-through of how Aevilo AI proposes, previews and applies CSS.
Build with quiet confidence.
Precision tools for teams who care about every pixel.
Start buildingWatch the filmOne fullscreen creative workspace.
For bigger projects, combine element layers, style controls and a multi-track motion timeline. Work in the canvas or alongside a live tab, then save local projects. See pricing for current availability.
All of Aevilo.
Inspect and design
Aevilo Inspector
Select any element (Alt Shift E, the toolbar or the page edge tab). Accurate outlines through clipping, nested scrolling, transforms and sticky elements; ↑↓ moves to parent and child.
Design System
A page’s measured colours with roles, type hierarchy, fonts, radii, spacing and shadows. Save snapshots, compare two sources, generate light and dark themes.
Responsive
Every breakpoint the page defines, and the @media and @container rules that apply to the selected element. Preview the page at any width.
Asset Explorer
Images, CSS backgrounds, inline SVG and icons with dimensions, format, origin and alt-text status. Locate each one on the page.
Export component
Turn a selected element and its children into self-contained HTML and CSS, checked against the original.
Style and animate
Aevilo Styles
A live, on-page editor: appearance, typography, layout with resize handles, effects, and an Advanced tab with a code editor that explains errors in plain language.
Effects
Restrained, premium effects: frosted glass, animated border, prismatic edge, sparkles, kinetic type, magnetic hover, ambient texture and a precision cursor. Off-screen effects pause.
Motion Studio
Build multi-element timelines with keyframes, nested groups, motion paths, easing and interaction triggers. Save presets per site and export animation code or editable recipes.
Architectural construction
Pages assemble as they open, in one of nine styles: Architectural, Minimal, Cinematic, Blueprint, Cascade, Scan, Silk, Halo and Depth.
Projects
Pro Studio (paid)
A fullscreen workspace for selecting elements, editing styles and arranging motion on a shared timeline. Use the embedded canvas where supported, or edit a website in its own tab. Check pricing for availability.
Persistent themes
Saved per website (or pages within it), on or off in a click, with up to 15 revisions. Restore original turns a site back instantly.
Collections
Save elements, colours, tokens and assets you find, with notes and tags.
Share privately
Export a theme or motion as a file, preview exactly what it contains, and review imports before they apply.
Assist and control
Aevilo AI
Chat, explain, build and debug, with Aevilo’s measurements attached when you choose. Uses Chrome’s on-device model when available, and says so when it is not.
Privacy Center
Lists everything Aevilo keeps in your browser, what it is for, and lets you export or delete it.
Command palette and shortcuts
Alt Shift P opens commands on any page. Alt Shift L replays construction; Alt Shift K turns it on or off.
Make the web yours.
Join the list for Chrome Web Store availability.