CSS Custom Properties (Variables) and @property

Theming and runtime styling with CSS custom properties, and on registering typed properties with @property so values like angles and colors can animate.

Content tagged css-custom-properties

• Snippet:SVG Circular Progress Ring with CSS Variables

  Build an SVG progress ring from one CSS variable.

  Build an accessible SVG circular progress ring: pathLength and a --progress variable set the arc, with a gradient variant and smooth value transitions.

• Post:CSS Container Queries Deep Dive: Named Containers, cqi Units, and Style Queries

  Make components respond to their container, not the viewport.

  Go beyond basic @container: inline-size vs size containment, named containers, cqi/cqb/cqmin/cqmax units, and style queries, with diagrams and a live sandbox.

• Tutorial:Conditional CSS Values with the if() Function

  Swap CSS values by media, supports, or style conditions.

  The if() function picks between several values inside one CSS declaration based on a media(), supports(), or style() condition — collapsing what used to require duplicating an entire rule under @media/@supports, or a JS class toggle, into one line, with a fallback for browsers that don't support it yet.

• Post:CSS Gradient Text Guide: Background-Clip, Animation & Advanced Tricks

  Create stunning gradient text effects with CSS

  Learn how to create CSS gradient text using background-clip, animation, stroke effects, @property, multi-line fixes, and accessible, responsive techniques with real-world examples.