CSS playground
Generate gradients, layered box shadows, and border radii; try flexbox and grid settings live; work out clamp() fluid type; shape cubic-bezier easings with a running animation; and convert between px, rem, em, vw, and pt.
Added
How to use it
Generators
-
Gradient: linear, radial, or conic, with as many colour stops as you like, and an option to repeat.
-
Box shadow: stack layers, each with offset, blur, spread, colour, opacity, and inset. Presets include a smooth multi-layer shadow.
-
Border radius: set each corner’s horizontal and vertical radius in px, %, or rem. The output is the shortest equivalent shorthand.
Every tab previews live and shows CSS ready to copy.
Layout
Flexbox and Grid show a container of numbered items and update as you change direction,
wrapping, alignment, gap, templates (repeat(), minmax(), auto-fill), auto-flow, and
spans. Try the settings here to see how they interact before using them in your stylesheet.
Type, motion, units
-
Fluid type builds a
clamp()that grows a font from one size at a narrow viewport to another at a wide one. The fixed part is in rem so it still respects the reader’s font setting. A slider and table show the size at common widths. -
Easing: drag the two handles of a
cubic-bezier()or pick a preset. A ball runs the curve beside a linear one so you can feel the difference. -
Units converts a length to every CSS unit, given a root font size, parent font size, and viewport. Use this window fills these in from the current browser window.
Feedback is a gift. Something to improve, a feature to add, or a bug? Tell me.
Runs entirely in your browser; nothing you type leaves this page.