Stripped Background
Diagonal stripes that create stunning visual depth and dimension
Striped Background Effect
Create stunning visual depth with animated diagonal stripes. Perfect for hero sections, cards, and feature areas that demand attention.
TIP:Dark mode recommended
Installation
Props
The StripedBackground component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the container element. |
stripeWidth | number | 50 | The width of each stripe in pixels. Controls the overall scale of the striped pattern. |
fadeDirection | "bottom" | "top" | "bottom" | Direction of the fade gradient mask. 'bottom' fades from top to bottom, 'top' fades from bottom to top. |
position | "left" | "right" | "both" | "both" | Position of the stripes on the screen. Can be 'left', 'right', or 'both' sides. |