Gradients

This is the Standard reference for gradients. The vocabulary comes from the teacss-ts Storybook at revision 9de266d for package version 0.10.11. 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.