Skip to content

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.

When to Use the CSS Playground

Use the CSS Playground to experiment with CSS effects before committing to production code: test gradient combinations, box shadows, border-radius values, CSS filters (blur, brightness, contrast), and CSS transforms visually. It's also useful for explaining CSS properties to learners, generating copy-pasteable snippets, and quickly prototyping visual effects without setting up a development environment. Pair it with the Color Picker, Color Contrast Checker, Color Palette Generator, or Regex Tester for a complete front-end design workflow.

CSS Property Quick Reference

Commonly used CSS visual properties:

box-shadow: offset-x offset-y blur-radius spread-radius color. Multiple shadows: comma-separated. Inset shadows use the inset keyword.

border-radius: top-left top-right bottom-right bottom-left. Use 50% for circles; px values for pills.

linear-gradient: linear-gradient(direction, color-stop1, color-stop2, ...). Directions: to right, 45deg, etc.

filter: blur(4px), brightness(1.2), contrast(1.5), saturate(2), grayscale(1), drop-shadow(...). Chain multiple filters with spaces.

transform: scale(1.2), rotate(45deg), translateX(10px), skew(10deg). Use transform-origin to control the pivot point.

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.
What is the difference between filter and backdrop-filter?
filter applies visual effects to the element itself (and its contents). backdrop-filter applies effects to the area behind the element — useful for frosted-glass effects (combine with a semi-transparent background: background: rgba(255,255,255,0.2); backdrop-filter: blur(10px)). backdrop-filter has strong browser support in modern browsers (Chrome 76+, Firefox 103+, Safari 9+).
How do I create a smooth CSS gradient?
For smooth gradients, use OKLCH or HSL color spaces instead of hex/RGB — they produce more perceptually uniform transitions. In CSS: background: linear-gradient(in oklch, oklch(60% 0.2 250), oklch(60% 0.2 350)). Avoid the 'gray zone' problem in RGB gradients (colors passing through gray when hues are opposite) by using color-interpolation hints or switching to OKLCH. For creative gradients, add 3+ color stops with easing hints.

By Bam's Thinkery — Updated