This is the Standard reference for filters.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
blur
Interactive example. Rule type: composer.
Prefixes: blur. Example: blur:none. It emits --T-blur:blur(0);filter:var(--T-blur,) var(--T-brightness,) var(--T-contrast,) var(--T-grayscale,) var(--T-hue-rotate,) var(--T-invert,) var(--T-opacity,) var(--T-saturate,) var(--T-sepia,) var(--T-drop-shadow,);.
Documented values (7)
none, 1x, 2x, 3x, 4x, 5x, 6x
brightness
Interactive example. Rule type: composer.
Prefixes: brightness. Example: brightness:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
contrast
Interactive example. Rule type: composer.
Prefixes: contrast. Example: contrast:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
grayscale
Interactive example. Rule type: composer.
Prefixes: grayscale. Example: grayscale:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
invert
Interactive example. Rule type: composer.
Prefixes: invert. Example: invert:0. It emits --T-invert:invert(0%);filter:var(--T-blur,) var(--T-brightness,) var(--T-contrast,) var(--T-grayscale,) var(--T-hue-rotate,) var(--T-invert,) var(--T-opacity,) var(--T-saturate,) var(--T-sepia,) var(--T-drop-shadow,);.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
filter-opacity
Interactive example. Rule type: composer.
Prefixes: filter-opacity. Example: filter-opacity:0. It emits --T-opacity:opacity(0%);filter:var(--T-blur,) var(--T-brightness,) var(--T-contrast,) var(--T-grayscale,) var(--T-hue-rotate,) var(--T-invert,) var(--T-opacity,) var(--T-saturate,) var(--T-sepia,) var(--T-drop-shadow,);.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
saturate
Interactive example. Rule type: composer.
Prefixes: saturate. Example: saturate:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
sepia
Interactive example. Rule type: composer.
Prefixes: sepia. Example: sepia:0. It emits --T-sepia:sepia(0%);filter:var(--T-blur,) var(--T-brightness,) var(--T-contrast,) var(--T-grayscale,) var(--T-hue-rotate,) var(--T-invert,) var(--T-opacity,) var(--T-saturate,) var(--T-sepia,) var(--T-drop-shadow,);.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
hue-rotate
Interactive example. Rule type: composer.
Prefixes: hue-rotate. Example: hue-rotate:0. The generated declaration is composite; inspect it in Storybook.
Documented values (5)
0, 45, 90, 180, 270
drop-shadow
Interactive example. Rule type: composer.
Prefixes: drop-shadow. Example: drop-shadow:none. It emits --T-drop-shadow:;filter:var(--T-blur,) var(--T-brightness,) var(--T-contrast,) var(--T-grayscale,) var(--T-hue-rotate,) var(--T-invert,) var(--T-opacity,) var(--T-saturate,) var(--T-sepia,) var(--T-drop-shadow,);.
Documented values (6)
none, 1x, 2x, 3x, 4x, 5x
filter
Interactive example.
Prefixes: filter. Example: filter:none. It emits filter:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (1)
none
backdrop-blur
Interactive example. Rule type: composer.
Prefixes: backdrop-blur. Example: backdrop-blur:none. The generated declaration is composite; inspect it in Storybook.
Documented values (7)
none, 1x, 2x, 3x, 4x, 5x, 6x
backdrop-brightness
Interactive example. Rule type: composer.
Prefixes: backdrop-brightness. Example: backdrop-brightness:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-contrast
Interactive example. Rule type: composer.
Prefixes: backdrop-contrast. Example: backdrop-contrast:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-grayscale
Interactive example. Rule type: composer.
Prefixes: backdrop-grayscale. Example: backdrop-grayscale:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-invert
Interactive example. Rule type: composer.
Prefixes: backdrop-invert. Example: backdrop-invert:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-saturate
Interactive example. Rule type: composer.
Prefixes: backdrop-saturate. Example: backdrop-saturate:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-sepia
Interactive example. Rule type: composer.
Prefixes: backdrop-sepia. Example: backdrop-sepia:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-hue-rotate
Interactive example. Rule type: composer.
Prefixes: backdrop-hue-rotate. Example: backdrop-hue-rotate:0. The generated declaration is composite; inspect it in Storybook.
Documented values (5)
0, 45, 90, 180, 270
backdrop-opacity
Interactive example. Rule type: composer.
Prefixes: backdrop-opacity. Example: backdrop-opacity:0. The generated declaration is composite; inspect it in Storybook.
Documented values (18)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100, 125, 150, 200
backdrop-filter
Interactive example.
Prefixes: backdrop-filter. Example: backdrop-filter:none. It emits backdrop-filter:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (1)
none
color-interpolation-filters
Interactive example.
Prefixes: color-interpolation-filters. Example: color-interpolation-filters:auto. It emits color-interpolation-filters:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
auto, sRGB, linearRGB
flood-color
Interactive example.
Prefixes: flood-color. Example: flood-color:ink-100. It emits flood-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (476)
ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950,
gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900, gray-950,
mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900, mauve-950,
slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900, slate-950,
sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900, sage-950,
olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900, olive-950,
sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950,
tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950,
red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950,
ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950,
crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950,
pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950,
plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950,
purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900, purple-950,
violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900, violet-950,
iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900, iris-950,
indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900, indigo-950,
blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900, blue-950,
cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950,
teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950,
jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950,
green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950,
grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950,
brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950,
bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950,
gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900, gold-950,
sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900, sky-950,
mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900, mint-950,
lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900, lime-950,
yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950,
amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950,
orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950,
primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950,
neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950,
focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950,
success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950,
warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950,
failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900, failure-950,
general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900, general-950,
transparent, current, black, white, [#abc], $color, $color|white, red-500/50
flood-opacity
Interactive example.
Prefixes: flood-opacity. Example: flood-opacity:0. It emits flood-opacity:0%;.
Documented values (15)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100
lighting-color
Interactive example.
Prefixes: lighting-color. Example: lighting-color:ink-100. It emits lighting-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (476)
ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950,
gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900, gray-950,
mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900, mauve-950,
slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900, slate-950,
sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900, sage-950,
olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900, olive-950,
sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950,
tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950,
red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950,
ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950,
crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950,
pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950,
plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950,
purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900, purple-950,
violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900, violet-950,
iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900, iris-950,
indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900, indigo-950,
blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900, blue-950,
cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950,
teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950,
jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950,
green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950,
grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950,
brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950,
bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950,
gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900, gold-950,
sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900, sky-950,
mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900, mint-950,
lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900, lime-950,
yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950,
amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950,
orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950,
primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950,
neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950,
focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950,
success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950,
warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950,
failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900, failure-950,
general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900, general-950,
transparent, current, black, white, [#abc], $color, $color|white, red-500/50