Press/to search

Patterns

Checks v1.0.8

Utilities for sets an element's background checks pattern.

Class

classcss
pattern
checks-sm		background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);

background-position: 0 0, 10px 10px;

background-size: calc(2 * 10px) calc(2 * 10px)
pattern
checks-md		background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);

background-position: 0 0, 25px 25px;

background-size: calc(2 * 25px) calc(2 * 25px)
pattern
checks-lg		background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);

background-position: 0 0, 50px 50px;

background-size: calc(2 * 50px) calc(2 * 50px)
pattern
checks-xl		background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);

background-position: 0 0, 100px 100px;

background-size: calc(2 * 100px) calc(2 * 100px)

Usage

Set basic checks pattern.

<!-- Example -->
<y class="pattern checks-sm ... h-32 w-full">
  ...
</y>

Set pattern with color by using text-{color} utility. (See Text Color).

<!-- Example -->
<y class="pattern checks-sm text-amber-400 ... h-32 w-full">
  ...
</y>

Set pattern clipping with text.

TEXT
<!-- Example -->
<y class="pattern checks-sm clip-text text-red-500">
  <y>
    TEXT
  </y>
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.