Modern CSS playgrounds

Build custom CSS functions, add or remove parameters with types and default values, combine multiple result descriptors with @media, and copy a complete example ready to test.

Explore border with interactive controls for width, style, and color by side or axis, compare physical and logical properties, and copy the CSS instantly.

Adjust border-radius by corner or corner pairs, switch units and physical or logical properties, and generate production-ready CSS.

Draw non-rectangular borders with basic shapes and shape(), compare stroke and fill modes, and see the border follow the geometry.

Explore outline with controls for width, style, color, and offset, switch between px and rem, and generate shorthand or separate-property CSS.

Experiment with corner-shape and border-radius to build rounded, beveled, notched, or scooped corners by corner or pair with modern CSS.

Explore accent-color with a color picker to customize native checkbox, radio, range, and progress controls without JavaScript.

Explore color-mix() by adjusting the color space, two or more colors, and their percentages. In polar spaces such as hsl, hwb, lch, and oklch you can also change hue interpolation and see the browser-resolved color in the generated code.

Change only a color’s opacity with alpha(). Set a new alpha or multiply the original with calc(alpha * …), preserving its components and color space.

Choose a background color and image for each color scheme. CSS selects the first argument in light mode and the second in dark mode. Color and image variants have independent support.

Explore contrast-color() with a background color picker. The example applies the selected color to a button and lets CSS automatically resolve whether the text should be black or white, with generated code inspired by MDN.

Explore font-size with controls for comparing browser keywords, relative values, and lengths on a real text block.

Explore font-size-adjust with controls for preserving perceived text size when changing font family and metric.

Explore font-smooth with presets for comparing font antialiasing and copying CSS with the prefixes used by compatible browsers.

Explore font-stretch with controls for testing typographic widths, keywords, and percentages on real text.

Explore font-style with controls for comparing true italics, synthesized oblique text, and slant angles on a real text block.

Explore font-variant with controls for caps, ligatures, numeric variants, east-asian forms, and position on a real text block.

Explore font-weight with controls for comparing absolute keywords, relative keywords, and numeric weights on a real text block.

Explore letter-spacing with controls for spreading out or tightening characters on a real text block and checking how readability changes.

Explore word-spacing with controls for spreading out or tightening words on a real text block and checking how readability changes.

Explore line-height with controls for comparing normal, unitless values, rem lengths, and percentages on a real text block.

Explore text-align with controls for text direction and logical or physical alignment. When using justify, you can also test text-justify and copy the generated CSS.

Explore text-align-last with controls for text direction and the alignment of the final line or the line before a forced break.

Explore text-indent with controls for indenting the first line of a block, changing text direction, and trying the hanging and each-line keywords.

Explore text-decoration with controls for combining underline, overline, line-through, stroke styles, color, and thickness on real text.

Explore text-fit with none, grow, and shrink, the consistent, per-line, and per-line-all modes, and an optional percentage that limits the scaling factor.

Explore text-transform with a selector for changing visual capitalization without editing the HTML content.

Explore text-wrap with a selector for comparing line breaking, balanced headings, and readability-focused wrapping.

Explore text-box with controls for trimming vertical font space and choosing the metric edges used by button text.

Build basic and attribute selectors, compare them across three HTML scenarios, and inspect every match and its specificity.

Compare depth and sibling relationships across three HTML scenarios and inspect exactly which elements each combinator selects.

Combine conditions with OR, AND, and functional pseudo-classes; compare their matches and inspect how specificity changes.

Select roots, empty elements, and sibling positions; compare An+B, reverse counting, and of filters.

Compare links, pointer, keyboard, descendant focus, fragments, and query context using real browser states.

Compare availability, editability, choices, requirements, validity, and ranges through real native-control states.

Distinguish an HTML attribute, the semantic open state, and popover-specific visibility through real interactions.

Observe seven real audio and video states, adjust their presentation, and distinguish playback, loading, and sound.

Explore how language, direction, definition, and headings affect real selector matches.

Explore what a rule inside the shadow root selects and what the page can style from outside.

Explore ::backdrop with a native modal dialog. Change only the backdrop background color and copy the generated command/commandfor HTML and CSS.

Explore the CSS ::details-content pseudo-element with a native details element, customize the expandable content, and copy the generated HTML and CSS.

Explore ::search-text with controls for find-in-page matches and use :current to distinguish the active result.

Explore ::selection with controls for changing the color, background, decoration, and shadow of user-selected text.

Explore the new customizable select surface with rich option content, picker, icon, and checkmark styling, plus an optional fallback for browsers without support.

Explore field-sizing with controls for switching between content and fixed, compare compatible form field sizing, and copy production-ready CSS.

Explore background-color with a simple color picker to preview the result instantly and copy production-ready CSS.

Explore background-image with an editable URL field and controls for position, size, repeat, and attachment to preview the result instantly and copy production-ready CSS.

Explore filter by enabling multiple functions at once, adjust their values, and test the result on an image or a color background before copying the generated CSS.

Explore backdrop-filter with a background image and a translucent centered panel. Adjust chained filter functions and copy the generated HTML and CSS.

Explore mix-blend-mode with high-contrast backdrops and an editable subject to see how it blends with the content behind it.

Combine up to three box shadows with offset, blur, spread, color, and inset, then generate copy-ready code.

Combine up to three text shadows, adjust their offsets, blur, and color, and generate copy-ready code.

Build flexible layouts with visual controls for the container and each item’s individual properties, then copy the resulting HTML, CSS, or Tailwind.

Design complete two-dimensional grids: define rows and columns, create areas, span cells, control each item placement, and copy the result.

Build masonry-like layouts with native CSS: switch between waterfall and brick, combine lane patterns, tune flow tolerance, and test progressive enhancement in browsers without support.

Distribute editorial content across columns: combine width and count, tune gaps and rules, and control spans and breaks before copying the code.

Compose 2D and 3D transforms, compare how function order changes the result, and move the origin before copying the generated code.

Explore margin with interactive controls for all sides, per-side, or per-axis spacing, switch units, compare physical and logical properties, and use auto to push or center the block.

Explore padding with interactive controls for all sides, per-side, or per-axis spacing, switch units, and compare physical and logical properties.

Explore gap decorations with a multi-row, multi-column grid. Adjust row-rule, column-rule, insets, breaks, visibility, and overlap to generate modern CSS.

Explore how scroll-margin expands the area used to bring an element into view without occupying layout space. Apply one shared value or adjust every side independently.

Explore how scroll-padding moves a scroll container’s optimal viewing region inward without changing layout. Apply one shared value or adjust every side independently.

Explore how a scroll area settles into predictable positions. Change the axis, strictness, block and inline alignment, and the spacing around the snapport and each target.

Combine scroll snap with ::scroll-button(), ::scroll-marker, and ::scroll-marker-group to explore a native CSS carousel. Read the guide for navigation, accessibility, and fallback.

Explore scrollbar-color, scrollbar-width, and scrollbar-gutter with a preview that forces vertical scrolling and generates copy-ready CSS.