Press/to search

Patterns

Cross Dots v1.0.8

Utilities for sets an element's background cross-dots pattern.

Class

classcss
pattern
cross-dots-sm		background-image: radial-gradient(currentColor 5px, transparent 5px), radial-gradient(currentColor 5px, transparent 5px);

background-size: calc(20 * 5px) calc(20 * 5px);

background-position: 0 0, calc(10 * 5px) calc(10 * 5px)
pattern
cross-dots-md		background-image: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px);

background-size: calc(20 * 1px) calc(20 * 1px);

background-position: 0 0, calc(10 * 1px) calc(10 * 1px)
pattern
cross-dots-lg		background-image: radial-gradient(currentColor 1.5px, transparent 1.5px), radial-gradient(currentColor 1.5px, transparent 1.5px);

background-size: calc(20 * 1.5px) calc(20 * 1.5px);

background-position: 0 0, calc(10 * 1.5px) calc(10 * 1.5px)
pattern
cross-dots-xl		background-image: radial-gradient(currentColor 2px, transparent 2px), radial-gradient(currentColor 2px, transparent 2px);

background-size: calc(20 * 2px) calc(20 * 2px);

background-position: 0 0, calc(10 * 2px) calc(10 * 2px)

Usage

Set basic cross-dots pattern.

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

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

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

Set pattern clipping with text.

TEXT
<!-- Example -->
<y class="pattern cross-dots-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.