A soft noise gradient background built with pure HTML and CSS that blends smooth color transitions with subtle texture overlays. It enhances surface richness and visual depth clarity without distracting from content.
Usage
Use this component when interfaces require textured gradient surfaces, such as hero sections, landing page banners, dashboard backgrounds, or feature panels that benefit from refined visual layering.
Implementation
The effect is implemented using CSS gradient layering combined with low opacity noise texture overlays, creating a balanced mix of color transition and fine grain texture. Responsive styling ensures consistent scaling across breakpoints.
HTML
<div class="bg-noise">
Content
</div>CSS
.bg-noise {
width: 200px;
padding: 2rem 0;
border-radius: 11px;
font-size: 13px;
text-align: center;
color: #111827;
background:
linear-gradient(135deg, #eef2ff, #ffffff),
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.03),
rgba(0,0,0,0.03) 2px,
transparent 2px,
transparent 4px
);
background-blend-mode: overlay;
}
@media (prefers-color-scheme: dark) {
.bg-noise {
color: #e5e7eb;
background:
linear-gradient(135deg, #1e1b4b, #020617),
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 4px
);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses gradient and texture overlay techniques
- Enhances subtle background depth perception
- Fully responsive across breakpoints
- Suitable for hero and section backgrounds
- Easy to customize gradient tones and texture intensity
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.