What Styles Gallery changes on your site
The extension changes design tokens, not markup — the colours, fonts, corner radii, shadows and timing a page already uses. How exactly that lands depends on how the site was built, so this is a gradient, not a supported/unsupported list.
There is no site where nothing happens. On a site built with CSS variables, it changes the variables. On every other site, it writes direct overrides instead — approximate, but visible.
How far it reaches
| Your site | Result | What that means |
|---|---|---|
| Tailwind v4 + shadcn | Exact | Every axis lands on a variable the site already reads: semantic surfaces (cards, muted text, borders), the whole neutral ramp, spacing density, page measure, type texture, radius, shadows and motion. |
| Tailwind v4, no shadcn | Exact, minus semantics | Density, measure, type texture, the neutral ramp, shadows and radius all follow. Semantic surfaces the site names itself — bg-card, text-muted-foreground — keep their own colour, because there is no variable behind them. |
| Tailwind v3 | Approximate | v3 compiles its theme to fixed values, so there is nothing to override. The extension switches to direct overrides: colours, fonts, corners, shadows and tempo change; spacing and page width stay as the site has them. Shadow utilities and shadcn-v3's semantic colours still land natively on top. |
| Anything else | Approximate | WordPress, Bootstrap, hand-written CSS, a framework's own design system — same direct-override path. It reads the page's structure rather than its class names, so cards, buttons, fields, headings and body text all pick up the direction. |
The panel tells you which one you're on: a chip next to the site name reads v4 · shadcn, v3 or no Tailwind. If it can't read the site's CSS at all — served from another domain, no CORS header — it says can't tell and changes nothing about how it behaves. Not being sure is never a reason to do less.
What it never touches
- Layout and content
- The extension overrides design tokens. It never moves, adds or removes elements — a hero stays a hero.
- Inside iframes
- Only the top frame is restyled. Embedded third-party widgets keep their own look.
- Shadow DOM
- Styles injected into the document can't cross into a shadow root, so pure web-component sites stay as-is.
- A site's own !important
- A declaration the site marks !important wins. Rare, but it's the one thing the approximate path can't out-rank.
- Icon fonts and code
- Deliberately excluded from font swaps: changing them turns icons into tofu and makes code harder to read.
See it on your own page
You don't have to take any of this on faith. The panel has a change report: it measures your page with the styles off and on, and lists what actually moved — plus the elements that didn't move and why. That report is the real answer for your site; this page is only the shape of it.
Nothing leaves your browser to produce it. The extension reads the page you're looking at, in your tab, and stores your picks locally — no browsing data is collected. See the privacy policy.
Coming from another tool?
Honest comparisons, including what each of them still does better than this: