CSS Playground
Hands-on experiments for modern CSS features. Try them out, tweak the values, and see what the browser actually does.
CSS Grid Explorer
Pick a column template, adjust the gap, and click any item to control how many columns it spans. The CSS output updates as you go.
CSS Scroll Snap
Scroll the strip and toggle each setting. The difference between mandatory and proximity is hard to understand from docs alone.
color-mix() Explorer
Pick two colors, set the mix percentage, and switch color spaces. The comparison strip shows why the same two colors produce different midpoints in different spaces.
:nth-child() Visualizer
Click any selector pattern and see which items match in real time. Type your own formula in the custom input to test any pattern.
OKLCH Color Explorer
Drag the sliders to explore each OKLCH axis. Lightness, chroma, and hue, each isolated so you can feel what they do.
CSS clamp() Calculator
Set your min and max font size and the viewport range. Resize the preview container and watch the browser apply clamp() in real time.