A soft gradient mesh background built with pure HTML and CSS that blends multiple gradient layers into a smooth color mesh. It enhances organic visual flow and modern background depth clarity in contemporary UI designs.
Usage
Use this component when interfaces require multi color blended backgrounds, such as hero sections, landing pages, marketing banners, or creative dashboards that benefit from fluid tonal transitions.
Implementation
The effect is created using layered radial and linear gradient techniques, carefully positioned and blended to simulate a mesh style surface. Responsive styling ensures consistent scaling and color blending across breakpoints.
HTML
<div class="bg-mesh">
Background Preview
</div>CSS
.bg-mesh {
width: 200px;
padding: 2rem;
border-radius: 11px;
text-align: center;
background:
radial-gradient(circle at 20% 20%, rgba(99,102,241,0.35), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(34,211,238,0.35), transparent 45%),
#ffffff;
color: #111827;
transition: transform 200ms ease;
}
.bg-mesh:hover {
transform: scale(1.02);
}
@media (prefers-color-scheme: dark) {
.bg-mesh {
background:
radial-gradient(circle at 20% 20%, rgba(129,140,248,0.35), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(34,211,238,0.25), transparent 45%),
#020617;
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses layered gradient mesh techniques
- Enhances smooth multi tone visual blending
- Fully responsive across breakpoints
- Suitable for hero and creative sections
- Easy to customize color stops and blend positions
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.