CSS Playground

Tweak gradients, shadows, filters, and transforms. The preview updates live. Copy the CSS when it looks right.

No shadow. Add a layer.

px
Click me
background: #6B5CE7;
border-radius: 12px;

How it works

Every panel on the left maps to a CSS property. Move a slider, pick a color, add a gradient stop — the preview on the right re-renders instantly with the combined styles applied to a sample element. The output pane below gives you the final CSS in three formats: standard block, inline style attribute, or Tailwind arbitrary-value classes. Your work saves automatically to localStorage, so closing the tab doesn't lose your design. The Share link button encodes the full state into the URL — paste it anywhere and the recipient lands on the exact same design.

References

Every property follows the official MDN reference. For gradients see CSS Images Module Level 4 §gradients. Box-shadow is defined in CSS Backgrounds and Borders Level 3. Filter functions come from CSS Filter Effects Module Level 1. Transforms follow CSS Transforms Module Level 2. The widget emits standard CSS that works in every modern browser — no vendor prefixes needed for any of the properties exposed here.

What this does and doesn't do

Five panels cover the properties you'll actually tweak 90% of the time: gradient, shadow (multi-layer), border + radius, filter, and transform. Seven presets get you to a starting point fast — Glassmorphism, Neumorphism, Retro 2001, Brutalist, Soft shadow, Neon glow, Cyberpunk. All generate real CSS you can paste into any codebase or Tailwind arbitrary-value className.

What's not here, deliberately: no @keyframes animation generator (animation is a whole UX of its own — would dwarf the rest), no grid/flex layout builder (lots of tools do that well already), no SVG filter generator, no upload-your-own-image preview. You see what you get on a sample card and copy it out.

Frequently Asked Questions

Can I use the output in Tailwind?
Yes. Click 'Copy Tailwind' — you get arbitrary-value classes like bg-[linear-gradient(...)], shadow-[...], rounded-[12px]. Paste them directly on any element. Works in Tailwind v3 and v4.
How do I share my design with someone?
Click Share link. Your entire state (every slider, color, stop) gets encoded into the URL after ?s=. Send that URL and the recipient lands on your exact design. No account, no backend — the URL is the state.
Why no animation / @keyframes generator?
Building a good animation UI (timeline, easing curves, multi-property keyframes) is a tool of its own. Bolting it onto this one would push both toward mediocrity. If there's demand we'll build a dedicated /css-animation tool. For simple transitions, use your framework's hover/focus CSS.
What's the difference between filter: drop-shadow and box-shadow?
box-shadow casts a shadow of the element's bounding box. filter: drop-shadow casts a shadow that follows the actual pixel shape (including border-radius curves, SVG shapes, transparent PNGs). For a rounded card, both look identical. For a PNG of a coffee mug, only drop-shadow follows the mug's outline. This tool exposes box-shadow — use CSS filter syntax manually for drop-shadow.
Does my work save between visits?
Yes. Your current state auto-saves to localStorage on every change. Close the tab, come back next week — your design is waiting. Click Reset to start fresh. If you want the design elsewhere permanently, copy the Share link or export the CSS.