See the CSS before you write it
CSS is a visual language, and writing it blind is slow. You tweak a number, save, reload, squint, repeat. The twelve tools here flip that around. You drag, slide or paste, watch the result change, and copy finished code.
They run in your browser, they don't need an account and nothing you build is sent to a server.
Layout: Flexbox and Grid
The Flexbox playground gives you a live canvas with controls for the container (direction, wrap, justify, align, gap) and for each item (grow, shrink, basis, order, self alignment). It shows property tips next to the preview. Flexbox is the right tool for one-dimensional layouts, like a row of buttons or a navbar.
The CSS grid builder is for two-dimensional layouts. Click and drag to span cells, see overlap warnings, then copy the placement CSS. Grid shines for page-level structure, dashboards and galleries.
A rule of thumb: if you're thinking about rows and columns together, use Grid. If you're lining things up along a single line, use Flexbox. Nothing stops you from nesting one inside the other.
Shapes, shadows and gradients
The box-shadow generator has sliders for offset, blur, spread and color, and supports up to five stacked layers. Layered shadows look more natural than a single heavy one. Try a small tight shadow plus a large soft one.
The gradient generator handles linear, radial and conic gradients with draggable stops and a repeating mode. The clip-path visualizer lets you drag polygon points or adjust circle, ellipse and inset shapes, and outputs webkit-safe code. The border radius visualizer controls each corner and supports the slash syntax for elliptical corners.
Be careful with heavy effects on large or animated elements. Big blurs and many layered shadows can slow scrolling on low-end phones.
Motion
The keyframe builder lets you set stops with transforms and opacity, then play and pause a live preview. The cubic-bezier visualizer lets you drag the two control handles, compares ghost curves and previews the movement.
Good motion is quick and has purpose. 150 to 300 milliseconds suits most interface changes. Ease-out feels natural for things entering. Ease-in suits things leaving. And respect people who've turned on reduced motion in their system settings. Wrap decorative animation in a prefers-reduced-motion check.
Color and accessibility
The color format converter turns HEX, RGB, HSL, HSB, CMYK and CSS named colors into each other and offers harmony picks. HSL is handy for building shades, since you only change lightness.
The WCAG contrast checker computes ratios under WCAG 2.1 with AA and AAA badges, a live text preview and suggestions for accessible alternatives. Normal text needs 4.5 to 1 for AA, and large text needs 3 to 1. Light gray text on white is the most common failure. Roughly one in twelve men has some form of color vision deficiency, and everyone struggles in bright sun, so contrast helps all users.
The color palette extractor reads an image and returns dominant colors in HEX, RGB and HSL, with the nearest color names and CSS variables ready to paste.
Tailwind to CSS
The Tailwind converter takes a string of utility classes and shows the equivalent CSS, including media queries and dark mode selectors. It warns about classes it can't resolve. It's useful when you're moving a component out of a Tailwind project, or when you're learning what a class does underneath.
Habits worth keeping
Copy the output, then read it. Remove properties you don't need.
Use CSS variables for colors and spacing so one change updates the whole site.
Test on a real phone. Emulators lie about performance.
Check contrast before you ship, not after a complaint.