CSS Playground
Build gradients, box shadows, flexbox and grid layouts visually, and copy the CSS — all client-side.
Linear, radial and conic gradients with colour stops and angle controls.
Type
Angle
Color Stops
Generated CSS
Layered box shadows with offset, blur, spread, opacity and inset.
Shadow Layers
Generated CSS
Flex container and item properties, previewed live.
Container
flex-direction
flex-wrap
justify-content
align-items
align-content
gap
Items
Number of items
Generated CSS
Columns, rows, gaps and item placement, with layout presets.
Grid Setup
Preset Layouts
grid-template-columns
grid-template-rows
column-gap
row-gap
Number of items