Filter effects 1.2.2

Six new utility families that extend Filters — saturate, hue-rotate, contrast, invert, sepia, and drop-shadow — plus extended backdrop helpers and two glass composites. Deutsch: Filtereffekte

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Compose filter effect utilities for hero/media treatments documented on this page.

When not

Respect prefers-reduced-motion when effects animate.

Saturate

Adjust colour saturation. Useful for hover states on photo cards.

`.velin-saturate-0`	filter: saturate(0)
`.velin-saturate-50`	filter: saturate(0.5)
`.velin-saturate-100`	filter: saturate(1)
`.velin-saturate-150`	filter: saturate(1.5)
`.velin-saturate-200`	filter: saturate(2)

Hue rotate

.velin-hue-rotate-15 .velin-hue-rotate-30 .velin-hue-rotate-60 .velin-hue-rotate-90 .velin-hue-rotate-180

Contrast

.velin-contrast-50 .velin-contrast-75 .velin-contrast-100 .velin-contrast-125 .velin-contrast-150

Invert & Sepia

`.velin-invert`	filter: invert(1)
`.velin-invert-0`	filter: invert(0)
`.velin-sepia`	filter: sepia(1)
`.velin-sepia-50`	filter: sepia(0.5)
`.velin-sepia-0`	filter: sepia(0)

Drop shadow

Paint shadows beneath transparent SVG/PNG content. Unlike box-shadow, drop-shadow follows the alpha mask of the element.

`.velin-drop-shadow-sm`	Tight shadow, 1px offset
`.velin-drop-shadow-md`	Medium card lift
`.velin-drop-shadow-lg`	Large hero lift
`.velin-drop-shadow-glow`	Uses `--velin-color-primary` for accent glow

Extended backdrop

`.velin-backdrop-saturate`	backdrop-filter: saturate(180%)
`.velin-backdrop-brightness-90`	backdrop-filter: brightness(0.9)
`.velin-backdrop-brightness-110`	backdrop-filter: brightness(1.1)
`.velin-backdrop-grayscale`	backdrop-filter: grayscale(1)

Glass composites

Two opinionated frosted-surface classes for sticky bars, tooltips, and floating cards.

<header class="velin-glass">…</header>
<aside class="velin-glass-strong">…</aside>

Reduced motion

The .velin-saturate-* and .velin-hue-rotate-* classes are neutralised under prefers-reduced-motion: reduce because shifted hue can disorient users who request reduced visual stimuli.