Gradients

This is the Standard reference for gradients. 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.

Shared gradient parts

The g-* families hold shared gradient type, geometry, interpolation, and indexed stop state. Background, border, and mask gradient utilities consume those parts in their own output. A shared stop is not a complete visible gradient by itself; start with the relevant bg-g:*, border-g:*, or mask-g-* activator. The common-gradient gallery ↗ shows the composition and complete token reference. Border gradients additionally need visible border width and style.

background-gradient

Interactive example ↗. Rule type: composer. Vocabulary 1. Prefixes: bg-g. Example: bg-g:linear. The generated declaration is composite; inspect it in Storybook.

Vocabulary 2. Prefixes: g-to, bg-g-to. Example: g-to:top. It emits --T-g-linear:to top;.

Vocabulary 3. Prefixes: g-angle, bg-g-angle. Example: g-angle:0deg. It emits --T-g-linear:0deg;.

Vocabulary 4. Prefixes: g-from, bg-g-from. Example: g-from:0deg. It emits --T-g-conic:from 0deg;.

Vocabulary 5. Prefixes: g-at, bg-g-at. Example: g-at:center. It emits --T-g-at:at center;.

Vocabulary 6. Prefixes: g-pivot, bg-g-pivot. Example: g-pivot:center. It emits --T-g-pivot:at center;.

Vocabulary 7. Prefixes: g-shape, bg-g-shape. Example: g-shape:circle. It emits --T-g-shape:circle;.

Vocabulary 8. Prefixes: g-in, bg-g-in. Example: g-in:oklab. It emits --T-g-in:in oklab;.

Vocabulary 9. Prefixes: g-1-color, g-2-color, g-3-color, g-4-color, g-5-color, g-6-color, g-7-color, g-8-color, g-9-color. Example: g-1-color:teal-500. It emits --T-g-1-color:var(--color-teal-500);--T-g-1-position:, var(--T-g-1-color,transparent) var(--T-g-1-at-position,0%);--T-g-1-angle:, var(--T-g-1-color,transparent) var(--T-g-1-at-angle,0%);.

Vocabulary 10. Prefixes: bg-g-1-color, bg-g-2-color, bg-g-3-color, bg-g-4-color, bg-g-5-color, bg-g-6-color, bg-g-7-color, bg-g-8-color, bg-g-9-color. Example: bg-g-1-color:teal-500. The generated declaration is composite; inspect it in Storybook.

Vocabulary 11. Prefixes: g-1-position, g-2-position, g-3-position, g-4-position, g-5-position, g-6-position, g-7-position, g-8-position, g-9-position. Example: g-1-position:0%. It emits --T-g-1-at-position:0%;--T-g-1-position:, var(--T-g-1-color,transparent) var(--T-g-1-at-position,0%);.

Vocabulary 12. Prefixes: bg-g-1-position, bg-g-2-position, bg-g-3-position, bg-g-4-position, bg-g-5-position, bg-g-6-position, bg-g-7-position, bg-g-8-position, bg-g-9-position. Example: bg-g-1-position:0%. It emits --T-g-bg-1-at-position:0%;--T-g-bg-1-position:, var(--T-g-bg-1-color,var(--T-g-1-color,transparent)) var(--T-g-bg-1-at-position,var(--T-g-1-at-position,0%));.

Vocabulary 13. Prefixes: g-1-angle, g-2-angle, g-3-angle, g-4-angle, g-5-angle, g-6-angle, g-7-angle, g-8-angle, g-9-angle. Example: g-1-angle:0%. It emits --T-g-1-at-angle:0%;--T-g-1-angle:, var(--T-g-1-color,transparent) var(--T-g-1-at-angle,0%);.

Vocabulary 14. Prefixes: bg-g-1-angle, bg-g-2-angle, bg-g-3-angle, bg-g-4-angle, bg-g-5-angle, bg-g-6-angle, bg-g-7-angle, bg-g-8-angle, bg-g-9-angle. Example: bg-g-1-angle:0%. It emits --T-g-bg-1-at-angle:0%;--T-g-bg-1-angle:, var(--T-g-bg-1-color,var(--T-g-1-color,transparent)) var(--T-g-bg-1-at-angle,var(--T-g-1-at-angle,0%));.

Vocabulary 15. Prefixes: g-1, g-2, g-3, g-4, g-5, g-6, g-7, g-8, g-9. Example: g-1:none. It emits --T-g-1-position: ;--T-g-1-angle: ;.

Vocabulary 16. Prefixes: bg-g-1, bg-g-2, bg-g-3, bg-g-4, bg-g-5, bg-g-6, bg-g-7, bg-g-8, bg-g-9. Example: bg-g-1:none. It emits --T-g-bg-1-position: ;--T-g-bg-1-angle: ;.

border-gradient

Interactive example ↗. Rule type: composer. Vocabulary 1. Prefixes: border-g. Example: border-g:linear. The generated declaration is composite; inspect it in Storybook.

Vocabulary 2. Prefixes: g-to, border-g-to. Example: g-to:top. It emits --T-g-linear:to top;.

Vocabulary 3. Prefixes: g-angle, border-g-angle. Example: g-angle:0deg. It emits --T-g-linear:0deg;.

Vocabulary 4. Prefixes: g-from, border-g-from. Example: g-from:0deg. It emits --T-g-conic:from 0deg;.

Vocabulary 5. Prefixes: g-at, border-g-at. Example: g-at:center. It emits --T-g-at:at center;.

Vocabulary 6. Prefixes: g-pivot, border-g-pivot. Example: g-pivot:center. It emits --T-g-pivot:at center;.

Vocabulary 7. Prefixes: g-shape, border-g-shape. Example: g-shape:circle. It emits --T-g-shape:circle;.

Vocabulary 8. Prefixes: g-in, border-g-in. Example: g-in:oklab. It emits --T-g-in:in oklab;.

Vocabulary 9. Prefixes: g-1-color, g-2-color, g-3-color, g-4-color, g-5-color, g-6-color, g-7-color, g-8-color, g-9-color. Example: g-1-color:teal-500. It emits --T-g-1-color:var(--color-teal-500);--T-g-1-position:, var(--T-g-1-color,transparent) var(--T-g-1-at-position,0%);--T-g-1-angle:, var(--T-g-1-color,transparent) var(--T-g-1-at-angle,0%);.

Vocabulary 10. Prefixes: border-g-1-color, border-g-2-color, border-g-3-color, border-g-4-color, border-g-5-color, border-g-6-color, border-g-7-color, border-g-8-color, border-g-9-color. Example: border-g-1-color:teal-500. The generated declaration is composite; inspect it in Storybook.

Vocabulary 11. Prefixes: g-1-position, g-2-position, g-3-position, g-4-position, g-5-position, g-6-position, g-7-position, g-8-position, g-9-position. Example: g-1-position:0%. It emits --T-g-1-at-position:0%;--T-g-1-position:, var(--T-g-1-color,transparent) var(--T-g-1-at-position,0%);.

Vocabulary 12. Prefixes: border-g-1-position, border-g-2-position, border-g-3-position, border-g-4-position, border-g-5-position, border-g-6-position, border-g-7-position, border-g-8-position, border-g-9-position. Example: border-g-1-position:0%. It emits --T-g-border-1-at-position:0%;--T-g-border-1-position:, var(--T-g-border-1-color,var(--T-g-1-color,transparent)) var(--T-g-border-1-at-position,var(--T-g-1-at-position,0%));.

Vocabulary 13. Prefixes: g-1-angle, g-2-angle, g-3-angle, g-4-angle, g-5-angle, g-6-angle, g-7-angle, g-8-angle, g-9-angle. Example: g-1-angle:0%. It emits --T-g-1-at-angle:0%;--T-g-1-angle:, var(--T-g-1-color,transparent) var(--T-g-1-at-angle,0%);.

Vocabulary 14. Prefixes: border-g-1-angle, border-g-2-angle, border-g-3-angle, border-g-4-angle, border-g-5-angle, border-g-6-angle, border-g-7-angle, border-g-8-angle, border-g-9-angle. Example: border-g-1-angle:0%. It emits --T-g-border-1-at-angle:0%;--T-g-border-1-angle:, var(--T-g-border-1-color,var(--T-g-1-color,transparent)) var(--T-g-border-1-at-angle,var(--T-g-1-at-angle,0%));.

Vocabulary 15. Prefixes: g-1, g-2, g-3, g-4, g-5, g-6, g-7, g-8, g-9. Example: g-1:none. It emits --T-g-1-position: ;--T-g-1-angle: ;.

Vocabulary 16. Prefixes: border-g-1, border-g-2, border-g-3, border-g-4, border-g-5, border-g-6, border-g-7, border-g-8, border-g-9. Example: border-g-1:none. It emits --T-g-border-1-position: ;--T-g-border-1-angle: ;.

mask-gradient

Interactive example ↗. Rule type: composer. Vocabulary 1. Prefixes: mask-g. Example: mask-g:linear. The generated declaration is composite; inspect it in Storybook.

Vocabulary 2. Prefixes: Complete tokens. Example: mask-g-linear:on. The generated declaration is composite; inspect it in Storybook.

Vocabulary 3. Prefixes: g-to, mask-g-to. Example: g-to:top. It emits --T-g-linear:to top;.

Vocabulary 4. Prefixes: g-angle, mask-g-angle. Example: g-angle:0deg. It emits --T-g-linear:0deg;.

Vocabulary 5. Prefixes: g-from, mask-g-from. Example: g-from:0deg. It emits --T-g-conic:from 0deg;.

Vocabulary 6. Prefixes: g-at, mask-g-at. Example: g-at:center. It emits --T-g-at:at center;.

Vocabulary 7. Prefixes: g-pivot, mask-g-pivot. Example: g-pivot:center. It emits --T-g-pivot:at center;.

Vocabulary 8. Prefixes: g-shape, mask-g-shape. Example: g-shape:circle. It emits --T-g-shape:circle;.

Vocabulary 9. Prefixes: g-in, mask-g-in. Example: g-in:oklab. It emits --T-g-in:in oklab;.

Vocabulary 10. Prefixes: g-1-color, g-2-color, g-3-color, g-4-color, g-5-color, g-6-color, g-7-color, g-8-color, g-9-color. Example: g-1-color:teal-500. It emits --T-g-1-color:var(--color-teal-500);--T-g-1-position:, var(--T-g-1-color,transparent) var(--T-g-1-at-position,0%);--T-g-1-angle:, var(--T-g-1-color,transparent) var(--T-g-1-at-angle,0%);.

Vocabulary 11. Prefixes: mask-g-1-color, mask-g-2-color, mask-g-3-color, mask-g-4-color, mask-g-5-color, mask-g-6-color, mask-g-7-color, mask-g-8-color, mask-g-9-color. Example: mask-g-1-color:teal-500. The generated declaration is composite; inspect it in Storybook.

Vocabulary 12. Prefixes: g-1-position, g-2-position, g-3-position, g-4-position, g-5-position, g-6-position, g-7-position, g-8-position, g-9-position. Example: g-1-position:0%. It emits --T-g-1-at-position:0%;--T-g-1-position:, var(--T-g-1-color,transparent) var(--T-g-1-at-position,0%);.

Vocabulary 13. Prefixes: mask-g-1-position, mask-g-2-position, mask-g-3-position, mask-g-4-position, mask-g-5-position, mask-g-6-position, mask-g-7-position, mask-g-8-position, mask-g-9-position. Example: mask-g-1-position:0%. It emits --T-g-mask-1-at-position:0%;--T-g-mask-1-position:, var(--T-g-mask-1-color,var(--T-g-1-color,transparent)) var(--T-g-mask-1-at-position,var(--T-g-1-at-position,0%));.

Vocabulary 14. Prefixes: g-1-angle, g-2-angle, g-3-angle, g-4-angle, g-5-angle, g-6-angle, g-7-angle, g-8-angle, g-9-angle. Example: g-1-angle:0%. It emits --T-g-1-at-angle:0%;--T-g-1-angle:, var(--T-g-1-color,transparent) var(--T-g-1-at-angle,0%);.

Vocabulary 15. Prefixes: mask-g-1-angle, mask-g-2-angle, mask-g-3-angle, mask-g-4-angle, mask-g-5-angle, mask-g-6-angle, mask-g-7-angle, mask-g-8-angle, mask-g-9-angle. Example: mask-g-1-angle:0%. It emits --T-g-mask-1-at-angle:0%;--T-g-mask-1-angle:, var(--T-g-mask-1-color,var(--T-g-1-color,transparent)) var(--T-g-mask-1-at-angle,var(--T-g-1-at-angle,0%));.

Vocabulary 16. Prefixes: g-1, g-2, g-3, g-4, g-5, g-6, g-7, g-8, g-9. Example: g-1:none. It emits --T-g-1-position: ;--T-g-1-angle: ;.

Vocabulary 17. Prefixes: mask-g-1, mask-g-2, mask-g-3, mask-g-4, mask-g-5, mask-g-6, mask-g-7, mask-g-8, mask-g-9. Example: mask-g-1:none. It emits --T-g-mask-1-position: ;--T-g-mask-1-angle: ;.

Vocabulary 18. Prefixes: mask-g-linear-to. Example: mask-g-linear-to:top. It emits --T-g-mask-linear-linear:to top;.

Vocabulary 19. Prefixes: mask-g-linear-angle. Example: mask-g-linear-angle:0deg. It emits --T-g-mask-linear-linear:0deg;.

Vocabulary 20. Prefixes: mask-g-linear-in. Example: mask-g-linear-in:oklab. It emits --T-g-mask-linear-in:in oklab;.

Vocabulary 21. Prefixes: mask-g-radial-shape. Example: mask-g-radial-shape:circle. It emits --T-g-mask-radial-shape:circle;.

Vocabulary 22. Prefixes: mask-g-radial-at. Example: mask-g-radial-at:center. It emits --T-g-mask-radial-at:at center;.

Vocabulary 23. Prefixes: mask-g-radial-in. Example: mask-g-radial-in:oklab. It emits --T-g-mask-radial-in:in oklab;.

Vocabulary 24. Prefixes: mask-g-conic-from. Example: mask-g-conic-from:0deg. It emits --T-g-mask-conic-conic:from 0deg;.

Vocabulary 25. Prefixes: mask-g-conic-pivot. Example: mask-g-conic-pivot:center. It emits --T-g-mask-conic-pivot:at center;.

Vocabulary 26. Prefixes: mask-g-conic-in. Example: mask-g-conic-in:oklab. It emits --T-g-mask-conic-in:in oklab;.

Vocabulary 27. Prefixes: mask-g-linear-1-color, mask-g-linear-2-color, mask-g-linear-3-color, mask-g-linear-4-color, mask-g-linear-5-color, mask-g-linear-6-color, mask-g-linear-7-color, mask-g-linear-8-color, mask-g-linear-9-color. Example: mask-g-linear-1-color:teal-500. The generated declaration is composite; inspect it in Storybook.

Vocabulary 28. Prefixes: mask-g-linear-1-position, mask-g-linear-2-position, mask-g-linear-3-position, mask-g-linear-4-position, mask-g-linear-5-position, mask-g-linear-6-position, mask-g-linear-7-position, mask-g-linear-8-position, mask-g-linear-9-position. Example: mask-g-linear-1-position:0%. The generated declaration is composite; inspect it in Storybook.

Vocabulary 29. Prefixes: mask-g-linear-1, mask-g-linear-2, mask-g-linear-3, mask-g-linear-4, mask-g-linear-5, mask-g-linear-6, mask-g-linear-7, mask-g-linear-8, mask-g-linear-9. Example: mask-g-linear-1:none. It emits --T-g-mask-linear-1-position: ;.

Vocabulary 30. Prefixes: mask-g-radial-1-color, mask-g-radial-2-color, mask-g-radial-3-color, mask-g-radial-4-color, mask-g-radial-5-color, mask-g-radial-6-color, mask-g-radial-7-color, mask-g-radial-8-color, mask-g-radial-9-color. Example: mask-g-radial-1-color:teal-500. The generated declaration is composite; inspect it in Storybook.

Vocabulary 31. Prefixes: mask-g-radial-1-position, mask-g-radial-2-position, mask-g-radial-3-position, mask-g-radial-4-position, mask-g-radial-5-position, mask-g-radial-6-position, mask-g-radial-7-position, mask-g-radial-8-position, mask-g-radial-9-position. Example: mask-g-radial-1-position:0%. The generated declaration is composite; inspect it in Storybook.

Vocabulary 32. Prefixes: mask-g-radial-1, mask-g-radial-2, mask-g-radial-3, mask-g-radial-4, mask-g-radial-5, mask-g-radial-6, mask-g-radial-7, mask-g-radial-8, mask-g-radial-9. Example: mask-g-radial-1:none. It emits --T-g-mask-radial-1-position: ;.

Vocabulary 33. Prefixes: mask-g-conic-1-color, mask-g-conic-2-color, mask-g-conic-3-color, mask-g-conic-4-color, mask-g-conic-5-color, mask-g-conic-6-color, mask-g-conic-7-color, mask-g-conic-8-color, mask-g-conic-9-color. Example: mask-g-conic-1-color:teal-500. The generated declaration is composite; inspect it in Storybook.

Vocabulary 34. Prefixes: mask-g-conic-1-angle, mask-g-conic-2-angle, mask-g-conic-3-angle, mask-g-conic-4-angle, mask-g-conic-5-angle, mask-g-conic-6-angle, mask-g-conic-7-angle, mask-g-conic-8-angle, mask-g-conic-9-angle. Example: mask-g-conic-1-angle:0%. The generated declaration is composite; inspect it in Storybook.

Vocabulary 35. Prefixes: mask-g-conic-1, mask-g-conic-2, mask-g-conic-3, mask-g-conic-4, mask-g-conic-5, mask-g-conic-6, mask-g-conic-7, mask-g-conic-8, mask-g-conic-9. Example: mask-g-conic-1:none. It emits --T-g-mask-conic-1-angle: ;.

mask-edges

Interactive example ↗. Rule type: composer. Vocabulary 1. Prefixes: mask-t-1-color, mask-t-9-color, mask-b-1-color, mask-b-9-color, mask-l-1-color, mask-l-9-color, mask-r-1-color, mask-r-9-color, mask-x-1-color, mask-x-9-color, mask-y-1-color, mask-y-9-color. Example: mask-t-1-color:black. The generated declaration is composite; inspect it in Storybook.

Vocabulary 2. Prefixes: mask-t-1-position, mask-t-9-position, mask-b-1-position, mask-b-9-position, mask-l-1-position, mask-l-9-position, mask-r-1-position, mask-r-9-position, mask-x-1-position, mask-x-9-position, mask-y-1-position, mask-y-9-position. Example: mask-t-1-position:0%. The generated declaration is composite; inspect it in Storybook.