Patterns

Ripple v1.1.2

Utilities for sets an element's background ripple pattern.


Class

classcss
pattern
ripple-sm
background-image: repeating-radial-gradient(circle at 0 0, transparent 0, currentColor 10px), repeating-linear-gradient( currentColor, transparent )
pattern
ripple-md
background-image: repeating-radial-gradient(circle at 0 0, transparent 0, currentColor 25px), repeating-linear-gradient( currentColor, transparent )
pattern
ripple-lg
background-image: repeating-radial-gradient(circle at 0 0, transparent 0, currentColor 50px), repeating-linear-gradient( currentColor, transparent )
pattern
ripple-xl
background-image: repeating-radial-gradient(circle at 0 0, transparent 0, currentColor 100px), repeating-linear-gradient( currentColor, transparent )
Note: Utility customizing is unavailable.

Usage

Set basic ripple pattern.

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

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

<!-- Example -->
<y class="pattern ripple-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 ripple-sm text-amber-400 bg-red-500 ... h-32 w-full">
...
</y>

Set pattern clipping with text.

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

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled