CORE UTILITY FAMILY

Effects, filters, and masks

Control elevation, text shadows, opacity, blending, composable filters, backdrop filters, and CSS or SVG masks.

completeTarget v0.38 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use named shadow and blur tokens for repeatable visual depth, combine filter utilities freely, and use masks only when clipping cannot express the intended alpha or luminance shape.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-shadow-lg

--co-shadow: var(--co-shadow-lg); box-shadow: var(--co-inset-ring-shadow, 0 0 #0000), var(--co-ring-offset-shadow, 0 0 #0000), var(--co-ring-shadow, 0 0 #0000), var(--co-shadow, 0 0 #0000);

co-text-shadow-smtext-shadow: var(--co-text-shadow-sm);

co-opacity-50opacity: 0.5;

co-mix-blend-multiplymix-blend-mode: multiply;

co-blur-md

--co-blur: blur(var(--co-blur-md)); filter: var(--co-blur,) var(--co-brightness,) var(--co-contrast,) var(--co-grayscale,) var(--co-hue-rotate,) var(--co-invert,) var(--co-saturate,) var(--co-sepia,) var(--co-drop-shadow,);

-co-hue-rotate-30

--co-hue-rotate: hue-rotate(-30deg); filter: var(--co-blur,) var(--co-brightness,) var(--co-contrast,) var(--co-grayscale,) var(--co-hue-rotate,) var(--co-invert,) var(--co-saturate,) var(--co-sepia,) var(--co-drop-shadow,);

co-backdrop-blur-sm

--co-backdrop-blur: blur(var(--co-blur-sm)); -webkit-backdrop-filter: var(--co-backdrop-blur,) var(--co-backdrop-brightness,) var(--co-backdrop-contrast,) var(--co-backdrop-grayscale,) var(--co-backdrop-hue-rotate,) var(--co-backdrop-invert,) var(--co-backdrop-opacity,) var(--co-backdrop-saturate,) var(--co-backdrop-sepia,); backdrop-filter: var(--co-backdrop-blur,) var(--co-backdrop-brightness,) var(--co-backdrop-contrast,) var(--co-backdrop-grayscale,) var(--co-backdrop-hue-rotate,) var(--co-backdrop-invert,) var(--co-backdrop-opacity,) var(--co-backdrop-saturate,) var(--co-backdrop-sepia,);

co-mask-[url(/mask.svg)]mask-image: url(/mask.svg);

VISUAL EXAMPLE · SHADOWS

Create depth and surface hierarchy

Use box shadows for elevation, inset shadows for pressed surfaces, and text shadows when type needs separation from a complex background.

co-shadow-lg

co-inset-shadow-sm

Text shadow

component.coord

<article class="co-shadow-lg">Elevated card</article>
<button class="co-inset-shadow-sm">Pressed control</button>
<h2 class="co-text-shadow-md co-text-white">Text over image</h2>

VISUAL EXAMPLE · OPACITY

Fade a complete element

Opacity affects the element and every descendant as one composited layer. Use slash color opacity instead when only a background, border, or text color should be translucent.

co-opacity-100

co-opacity-60

co-opacity-25

component.coord

<div class="co-opacity-100">100%</div>
<div class="co-opacity-60">60%</div>
<div class="co-opacity-25">25%</div>

VISUAL EXAMPLE · BLEND MODES

Combine overlapping color layers

Mix-blend mode controls how an element blends with content behind it. Background-blend mode combines multiple backgrounds inside one element.

component.coord

<div class="co-relative">
  <div class="co-bg-blue co-mix-blend-multiply"></div>
  <div class="co-bg-pink co-mix-blend-screen"></div>
</div>

VISUAL EXAMPLE · FILTERS

Adjust rendered pixels compositionally

Filter utilities compose through independent variables, so blur, brightness, contrast, grayscale, hue rotation, and saturation can be combined in any class order.

grayscale

blur-sm

brightness + saturate

component.coord

<div class="co-grayscale">Grayscale</div>
<div class="co-blur-sm">Blurred</div>
<div class="co-brightness-125 co-saturate-150">Bright and saturated</div>

VISUAL EXAMPLE · BACKDROP FILTER

Filter the content behind a translucent surface

Backdrop filters affect pixels behind an element. Pair blur with a translucent background so the filtered layer remains visible.

Glass surface

co-bg-white/55 co-backdrop-blur-md

component.coord

<section class="co-bg-[image:linear-gradient(135deg,#111,#999)] co-p-8">
  <article class="co-bg-white/55 co-backdrop-blur-md co-border co-border-white/60">
    Glass surface
  </article>
</section>

VISUAL EXAMPLE · MASKS

Reveal a surface through an alpha shape

Masks control visibility using image alpha or luminance. Gradient masks are useful for fades, while URL masks can reuse application-owned artwork.

component.coord

<div class="co-mask-linear-to-r co-mask-from-black co-mask-to-transparent co-bg-brand-500"></div>
<div class="co-mask-[url(/logo-mask.svg)] co-mask-center co-mask-no-repeat co-mask-contain"></div>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-shadow-lg co-text-shadow-sm co-opacity-50 co-mix-blend-multiply co-blur-md -co-hue-rotate-30 co-backdrop-blur-sm co-mask-[url(/mask.svg)]">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Box shadows remain composable with outward and inset rings through shared shadow layers.
02
Shadow, text-shadow, and drop-shadow colors use dedicated custom properties so theme colors and opacity modifiers can recolor named geometry.
03
Filter and backdrop-filter functions are stored in independent custom properties, allowing blur, brightness, contrast, hue rotation, and other functions to compose regardless of class order.
04
Mask utilities cover image sources, alpha or luminance mode, geometry boxes, positioning, repetition, sizing, compositing, SVG mask type, and linear fade helpers.
05
Opacity values are expressed as percentages in class names and decimals in CSS.

CSS PROPERTIES

What this family controls

box-shadowtext-shadowopacitymix-blend-modebackground-blend-modefilterbackdrop-filtermask-imagemask-modemask-clipmask-compositemask-originmask-positionmask-repeatmask-sizemask-type

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-shadow-lg md:co-text-shadow-sm hover:co-shadow-lg">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-shadow-*
co-[content-visibility:auto]

NEGATIVE VALUES

Reverse supported values

Place the minus sign before the framework prefix. Only properties where negative CSS values are meaningful accept this modifier.

Canonical negative syntax

-co-{utility}
-co-hue-rotate-30

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Opacity affects the element and all descendants as a composited group.
Backdrop filters only become visible when content exists behind a translucent element.
Arbitrary mask and filter values must remain literal and are rejected when declaration-breaking characters are detected.

Previous← Borders, outlines, rings, and divide NextTables and multi-column →