Patterns

Circle v1.1.2

Utilities for sets an element's background circle pattern.

Class

class	css
pattern circle-sm	background-image: radial-gradient(circle at center center, currentColor, transparent), repeating-radial-gradient(circle at center center, currentColor, currentColor, 2px, transparent 10px, transparent 20px)
pattern circle-md	background-image: radial-gradient(circle at center center, currentColor, transparent), repeating-radial-gradient(circle at center center, currentColor, currentColor, 2px, transparent 25px, transparent 20px)
pattern circle-lg	background-image: radial-gradient(circle at center center, currentColor, transparent), repeating-radial-gradient(circle at center center, currentColor, currentColor, 2px, transparent 50px, transparent 20px)
pattern circle-xl	background-image: radial-gradient(circle at center center, currentColor, transparent), repeating-radial-gradient(circle at center center, currentColor, currentColor, 2px, transparent 100px, transparent 20px)

Note: Utility customizing is unavailable.

Set basic circle pattern.

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

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

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

Set pattern with foreground and background colors by using text-{color} and bg-{color}utilities. (See Text Color, Background Color).

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

Set pattern clipping with text.

TEXT

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