Design Customizer adds a slide-out theme panel to any website with a single script tag. Colors, fonts, spacing, radius, shadows, dark mode, a click-to-select element inspector and live custom CSS — then export everything as production-ready CSS.
No account · No build step · No framework required
<!-- paste before </body> — that's the whole install -->
<script src="https://vetrisuriya.github.io/design-customizer/design-customizer.js"></script>Three tabs — Design, Inspect and CSS — cover every way someone might want to change a page, from one-click presets to hand-written styles.
12 curated presets plus individual pickers for primary, accent, background, surface, text, border — and semantic success, warning, error and info tokens.
Twelve heading/body pairings, five monospace stacks, plus sliders for base size, heading scale, weight, line height and letter spacing.
Independent radii for buttons, cards and inputs, border width, density, content width, shadow depth, backdrop blur and animation speed.
Pick literally any element on the page and restyle its background, text, size, radius, padding or margin — or hide it. Overrides persist with the theme.
A built-in editor for gradients, keyframes and one-off tweaks. Applies instantly and ships inside Export theme.css.
One toggle swaps only neutral surfaces. Your preset's primary and accent carry over untouched, so brand stays consistent after dark.
Download a :root {} block, copy it to the clipboard, or import a teammate's theme JSON to keep iterating.
Fuzzy search across all 40+ controls, a “Surprise me” randomizer for exploration, runtime addPreset() for client brands, and one-click reset.
Choices save to a cookie (365 days) with a localStorage fallback, so a theme picked on one page follows visitors across the whole site.
Every row below is a live control in the panel — try them with the THEME tab open and watch this page respond.
Navy & Gold, Teal & Coral, Mono Ink, Violet & Mint and 8 more — one click repaints the page.
12 presetsPrimary, accent, background, surface, text, muted text, border, muted bg, success, warning, error, info.
12 pickers12 pairings · 5 mono stacks · base size · heading scale · weight · line height · letter spacing. Click any value badge to type an exact number.
19 controlsGlobal radius plus separate button, card and input radii, and border width — sharp to fully round.
5 slidersDensity multiplier that compresses or airs out every section, plus max content width.
2 slidersShadow depth (flat → deep), backdrop blur, animation speed, and 4 icon-tile treatments.
4 controlsSelect one element — or a whole group with Pick multiple — then edit background, text, size, weight, align, opacity, radius, padding, margin, shadow, visibility + extra CSS. Included in Export.
∞ elementsFreeform stylesheet with live apply — gradients, animations, overrides, anything.
∞ rulesNo design tool, no screenshots, no “can you try it in blue?” email threads.
Paste it before </body> on any page whose CSS uses custom properties. The panel, styles and logic inject themselves — nothing else to copy.
You, a client, a teammate — they open the panel and tune colors, type, spacing and effects, or click any element to restyle it directly. Every change is instant.
One click downloads theme.css — a clean :root {} block plus any custom CSS — ready to paste into the real stylesheet. Or do nothing: choices persist automatically.
Wherever a static mockup currently stands in for a conversation, put a live page instead.
Send the staging URL, not a PDF. Clients try palettes and fonts themselves, then you export exactly what they landed on. What they approved is what ships.
Register each client's brand with addPreset() at runtime. Prospects can preview their own identity on your product during a sales call.
Tune radius, density, type scale and elevation against actual components — buttons, tables, dialogs — instead of guessing in Figma and re-implementing later.
Ship the panel with a template or docs site. Every user gets a personalized reading experience, and every theme they export advertises your starter.
Honest trade-offs against the usual alternatives.
| Design Customizer | Hand-editing CSS | Page-builder theming | |
|---|---|---|---|
| Editable by non-developers | ✓ Live panel | ✕ Code only | ✓ But locked to that builder |
| Works on any stack | ✓ Any HTML page | ✓ | ✕ One platform |
| Per-element overrides | ✓ Inspector | ✓ Manual | ✕ Theme-level only |
| Export clean CSS | ✓ :root block + custom CSS | ✓ It's already CSS | ✕ Proprietary format |
| Install effort | ✓ One script tag | ✕ Dev time per tweak | ✕ Migration + lock-in |
| Runtime weight | ✓ ~1 file, 0 deps | ✓ None | ✕ Heavy editor bundle |
Design Customizer is a free, open-source CSS customizer and website theme editor. Unlike a traditional CSS theme generator that outputs code you paste blindly, it runs live on your real pages: open the panel, adjust the design system — colors, typography, spacing, radius, elevation — and watch every component update in real time.
When the design is right, export production-ready CSS with one click. Designers use it to prototype, developers use it to collect client feedback, and product teams use it to preview white-label themes — all without touching a build step.
Just the page the script is embedded on. Each page runs its own instance and writes variables onto its own <html> element. To roll a result out site-wide, export the CSS and paste it into your shared stylesheet — that step is deliberately yours to control.
Your CSS should already be driven by custom properties (var(--primary), var(--radius), …). The panel sets ~30 standard tokens; anything already referencing them updates live. For the rest — arbitrary elements, third-party markup — the Inspector and Custom CSS tabs cover everything else with no prerequisites at all.
No — all changes are local to their own browser (inline styles + a cookie). Your source files are never touched. Reset restores defaults instantly, and nothing persists anywhere except that visitor's browser.
Either pick them with the color pickers, or register them in code with DesignCustomizer.getInstance().addPreset({ id:'brand', name:'Client', vars:{…} }) — they appear as a first-class swatch next to the built-ins.
No. It's vanilla JS with zero dependencies and works inside any stack — static HTML, Next.js, WordPress, Shopify — because it only touches CSS variables, inline styles and one stylesheet for custom CSS.
Export first and the look is permanent: the downloaded theme.css is plain CSS with no dependency on the panel. Without exporting, themes simply stop applying — the page falls back to its authored stylesheet.
Open the demo, break it, recolor it, inspect it — then take the same script tag home. Free, dependency-free, yours to keep.