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 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.

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.

Explore :active with links and buttons. Change simple styles that apply while the user is pressing the element, then copy the generated CSS.

Explore :any-link with links that have href. Change simple styles, compare real links against placeholders without href, and copy the generated CSS.

Explore :hover with links and buttons. Change simple styles that apply when the pointer is over the element, then copy the generated CSS.

Explore :link with unvisited links. Change simple styles, compare links with href against placeholders without href, and copy the generated CSS.

Explore :visited with history-dependent links. Adjust only color properties allowed for privacy and review the generated CSS.

Explore :empty with visual examples for detecting elements with no child nodes, applying CSS placeholders, highlighting gaps, or hiding empty blocks.

Explore :open with details, dialog, select, and picker inputs. Change the background color and switch whether the style only applies when the element is open.

Explore :popover-open with a native popover. Toggle a positioning block that only applies while the popover is showing.

Explore :playing with <audio> and <video> elements. Change the style applied while media is playing and copy the generated CSS.

Explore :paused with <audio> and <video> elements. Change the style applied when media is paused and copy the generated CSS.

Explore :seeking with <audio> and <video> elements. Adjust the style applied while the browser seeks to a new media position.

Explore :buffering with <audio> and <video> elements. Change the style applied when the browser needs more data before continuing.

Explore :stalled with <audio> and <video> elements. Adjust styles for the case where the browser is trying to fetch data but loading stops.

Explore :muted with <audio> and <video> elements. Customize the style applied when media is muted.

Explore :volume-locked with <audio> and <video> elements. Define styles for when the browser or platform locks volume control.

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 build a native, accessible slider controlled entirely by CSS.

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