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:
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