A layered stripe background built with pure HTML and CSS that combines multiple striped patterns within a single surface. It enhances structured visual rhythm and background segmentation clarity in modern layouts.
Usage
Use this component when interfaces require pattern based surface styling, such as hero sections, promotional banners, feature panels, or dashboard backgrounds that benefit from geometric texture.
Implementation
The effect is created using CSS repeating linear gradient layering techniques, allowing controlled stripe angles, spacing, and color combinations. Responsive styling ensures consistent scaling across different screen sizes.
HTML
<div class="bg-stripe">
Textured
</div>CSS
.bg-stripe {
width: 200px;
padding: 2rem;
border-radius: 11px;
background:
repeating-linear-gradient(
45deg,
rgba(99,102,241,0.08),
rgba(99,102,241,0.08) 8px,
transparent 8px,
transparent 16px
),
#ffffff;
color: #111827;
text-align: center;
font-size: 13px;
}
@media (prefers-color-scheme: dark) {
.bg-stripe {
background:
repeating-linear-gradient(
45deg,
rgba(129,140,248,0.15),
rgba(129,140,248,0.15) 8px,
transparent 8px,
transparent 16px
),
#020617;
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses repeating gradient stripe patterns
- Enhances geometric background structure clarity
- Fully responsive across breakpoints
- Suitable for banners and feature sections
- Easy to customize stripe angle and spacing
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.