Patterns [Experimental]

Elevate CSS features an experimental compound property for setting the pattern as well as the colors of a background pattern and includes a number of attractive and flexible default patterns to be used for the background of elements:

Proceed With Caution

This feature is experimental and may not be appropriate for a production environment. The feature is fully functional in Google Chrome, but may not be supported in other browsers. This will be revised in future updates.

pattern Property

Property	Expected Values	Example
pattern	thinstripes, thickstripes, zigzag, cotton, hatching, honeycomb, microfiber, bubbles, velvet, grid, tape, shimmer, halftone, pointgrid, herringbone, speckled, lattice, plastic, glow, curtains, changeling, headshot, wheat, carbon, finish, prism	pattern:carbon

pattern Modifiers

Modifier	Expected Values	Example
fg	ColorToken (e.g., indigo+2)	pattern:carbon:fg-indigo+2
bg	ColorToken (e.g., indigo-1)	pattern:carbon:bg-indigo-2

Elevate recommends mixing and matching patterns with different colors to create a unique and visually appealing background for your elements