Press/to search

Patterns

Vertical Stripes v1.0.8

Utilities for sets an element's background vertical-stripes pattern.


Class

classcss
pattern
vertical-stripes-sm
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);

background-size: 10px 10px
pattern
vertical-stripes-md
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);

background-size: 25px 25px
pattern
vertical-stripes-lg
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);

background-size: 50px 50px
pattern
vertical-stripes-xl
background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);

background-size: 100px 100px

Usage

Set basic vertical-stripes pattern.

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

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

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

Set pattern clipping with text.

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