This background uses a subtle gradient mesh to add depth and visual interest without overpowering foreground content.
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
- Depth without heavy imagery
- Interactive micro-scale hover
- Suitable for cards and panels
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.