Load an .html file and, separately, a .css file — a real page paired with its real stylesheet, exactly like a design in progress. Every declaration, including shorthand values like margin: 10px 20px, is broken into individual sliders, swatches, and dropdowns, grouped by selector. If a value can't be classified it still gets an editable text field. Use the HTML tab to edit markup directly as text. Click "Open preview" in the toolbar to see and interact with the live page in its own window — drag it to a second monitor if you like. A demo page and demo styles are loaded so you can try it now — you can load just one and keep the other as the demo.
Box model
Select an element or rule to see its box model.
Which rule wins
Click an element in the preview to see which rules target it and which one wins.
Colour palette click to copy
Colours used across the stylesheet appear here.
Quick add
Select a rule (or element) to quick-add common properties.
Stylesheet stats
Load styles to see stats.
HTML
CSS