Decode → Build · flagship
Decode
Decode the code — load a demo or paste HTML/CSS and X-ray every element. Or decode the look — drop in a screenshot of literally anything and pull its colors, spacing and gradients. Everything runs in your browser.
Experimental. We fetch and sanitize the page so it can be inspected, but JS-heavy sites, logins and apps won't render — and a site's own CSS rules may be cross-origin (computed styles still work). Paste code for the best result, or use the X-Ray extension for live sites.
Hover an element in the frame →
🖼️
Drop a screenshot, paste (⌘/Ctrl+V), or
Any design, any app, any site behind a login — pixels have no origin, so there's nothing we can't open here.
What this is (and the honest limits)
The frame is same-origin, so CSS Crème can read every element you load into it — that's why hovering shows the real computed styles and the rules behind them. Pasted scripts don't run (the frame is sandboxed for safety), but CSS animations and layout are fully live.
Want to decode a site that isn't yours? A browser can't let one page read another site's source — that's a security boundary. To X-ray any live page on the open web, the CSS Crème X-Ray extension below. For now, load a demo, paste your own work, or open a breakdown.
Decode the whole web
CSS Crème X-Ray — browser extension
The same inspector, but it runs on any live site you visit — past the same-origin wall a web page can't cross. Hover anything on any page for its box model, computed CSS, matching rules and animations, then copy it. Reads only; nothing is changed or sent anywhere.
- Unzip it anywhere.
- Open
chrome://extensionsand turn on Developer mode. - Click Load unpacked and pick the
extensionfolder. - Open any site, click the icon (or Alt+Shift+X), and hover.