CSS Supports Generator

Visually build @supports feature queries with and / or / not operators and modern presets

Rule Setup
Feature Tests
Test 1
Modern Feature Presets

Click any preset to append a feature test. Hover for a quick description.

Your Browser
Unknown

Live test via CSS.supports(). Reflects this browser only — your visitors may differ.

(display: grid)
@supports rule 
@supports (display: grid) {
  .card {
    /* progressive enhancement styles */
  }
}
Copy combined CSS

Just the @supports rule. Toggle the fallback option to also include a @supports not block.

Common @supports Conditions Reference

ConditionDetectsNotes
(display: grid)CSS Grid LayoutBaseline since 2017
(grid-template-columns: subgrid)CSS SubgridChrome 117+, Safari 16+
(container-type: inline-size)CSS Container QueriesAll modern browsers since 2023
(anchor-name: --x)CSS Anchor PositioningChrome 125+ only as of 2026
(color: color-mix(in srgb, red, blue))color-mix() functionAll modern browsers since 2023
(view-transition-name: x)CSS View TransitionsChrome/Safari shipped; Firefox in progress
(text-wrap: balance)Balanced text wrappingAll modern browsers
selector(:has(*)):has() parent selectorAll modern browsers since 2023
selector(&)CSS NestingAll modern browsers since 2024

About CSS Supports Generator

The CSS Supports Generator is a free online tool that builds copy-ready @supports feature queries. Combine property/value tests like (display: grid) with selector tests like selector(:has(img)), chain them with and / or / not, and copy the resulting CSS.

Feature queries are the cleanest way to ship progressive enhancement: layer modern features (subgrid, container queries, anchor positioning, color-mix, view transitions, :has()) on top of a baseline that works everywhere, without breaking old browsers. The optional @supports not block makes it easy to scope fallback styles too.

The live "Your Browser" indicator uses CSS.supports() to test the conditions you build against the browser you are using right now. Everything runs locally — nothing is sent to a server. Pairs nicely with the Container Query Generator and Media Query Builder.

How to Use CSS Supports Generator

  1. 1. Enter the target selector for the CSS block you want to wrap (e.g. .card).
  2. 2. Choose a test kind: Property / value for things like (display: grid), or Selector for things like selector(:has(img)).
  3. 3. Fill in the property and value, or the selector. Toggle not to invert a single test.
  4. 4. Click Add feature test to chain another condition, then pick and or or as the operator.
  5. 5. Use the Modern Feature Presets to insert tests for subgrid, container-type, anchor-name, color-mix, view transitions, :has(), and more — instantly.
  6. 6. Optionally enable Include fallback to also emit a @supports not (...) block for legacy styles.
  7. 7. Check the Your Browser badge to confirm support, then click Copy and paste into your stylesheet.

Common Use Cases

Ship CSS subgrid safely

Wrap subgrid styles in @supports (grid-template-columns: subgrid) and fall back to explicit grid tracks for browsers without subgrid support.

Adopt :has() progressively

Use @supports selector(:has(*)) to layer parent-selector styles on top of a JS-free baseline, without breaking older browsers that ignore :has().

Roll out container queries

Detect container-type support before applying @container rules, so old browsers keep the simpler fallback layout.

Anchor positioning

Anchor positioning ships in Chrome ahead of other browsers. @supports (anchor-name: --x) gates the new layout while keeping a portable fallback.

Modern color spaces

Use @supports (color: color-mix(in srgb, red, blue)) or (color: oklch(70% 0.15 200)) to ship rich gradients and brand colors only where they actually render.

View transitions

Animate page transitions with @supports (view-transition-name: card), gracefully degrading to instant navigation elsewhere.

CSS nesting

Use @supports selector(&) to ship nested CSS directly to browsers that understand it, while keeping a flattened build for the rest.

Form control theming

Gate accent-color, scrollbar-color, and scrollbar-gutter behind @supports so you only override defaults when the property is actually honored.

Frequently Asked Questions