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) |
Usage
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.
<!-- Example -->
<y class="pattern circle-sm clip-text text-red-500">
<y>
TEXT
</y>
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |