This background uses layered diagonal stripes at low opacity to add texture without affecting content legibility.
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
- Adds texture without noise
- Works under text and icons
- Ideal for subtle UI separation
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.