Loading…
Hover to preview the lift effect.
.azr-component {
background: linear-gradient(135deg, #6366f1, #22d3ee);
color: #ffffff;
border-radius: 12px;
padding: 13px 24px;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
box-shadow: 0 14px 34px -10px rgba(15,23,42,.22), 0 0 18px rgba(99, 102, 241, 0.55);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.azr-component:hover {
transform: translateY(-3px); box-shadow: 0 24px 60px -16px rgba(15,23,42,.28), 0 0 24px rgba(99, 102, 241, 0.6);
}2 free exports left today · Go Pro for unlimited
Upload images or videos, drag them on the canvas, and layer them in front of or behind the component.
Save the current design to reuse it later. Stored in your browser.
Stack colored shadows for a Gradienty-style glow. Overrides elevation.
Hover (and click) the preview to feel it. The React export wires up all handlers.
Quick answer
A premium, in-browser studio with two modes: a full shadcn theme editor (light & dark tokens, WCAG contrast, export to globals.css / Tailwind / JSON) and a creative Component Lab — gradients, glassmorphism, colored shadows, glow and hover — that always exports valid CSS & React. Free, no sign-up.
A free, in-browser theme editor for shadcn/ui-style design systems. Edit the full light and dark token set — background, foreground, primary, secondary, muted, accent, destructive, border, ring — plus border radius, shadows and typography, with a realistic live component preview. Then export the code.
No. The theme studio runs entirely in your browser and is free with no sign-up. It uses no AI credits.
shadcn globals.css (HSL :root and .dark blocks), plain CSS variables, a Tailwind theme config, or JSON tokens. Copy or download any of them in one click.
Yes. It calculates the WCAG contrast ratio for key pairs — text on background, primary buttons and muted text — and flags whether each passes AA or AAA.
Yes. Paste your existing globals.css (the :root and .dark blocks, in HSL or hex) and the editor loads it so you can keep tweaking. You can also start from 12+ built-in presets or randomize a harmonious palette.
Every change is saved in your browser, and the Share button copies a URL that encodes your full theme so you can send it or reopen it later.
A creative mode for styling a single component — button, card, badge or input. Choose a solid, gradient or glassmorphism fill, add colored shadows and glow, tune border, radius, padding, typography and a hover effect, then export clean CSS or React. Because everything is generated from controls, the exported code is always valid — you can't break it.