gradient mesh background colorful blur colorful background for hero sections mesh gradient behind cards or content decorative page backdrop flat solid backgrounds lack visual interest need a mesh gradient without design tools want configurable multi-color gradient in CSS
Gradient Mesh
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/gradient-mesh.json Background
Customize
Quick Start
<div class="gradient-mesh h-screen"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 532 bytes · 21 lines
- Custom Properties
-
--mesh-color-1--mesh-color-2--mesh-color-3--mesh-color-4 - Classes
-
.gradient-mesh
gradient mesh background colorful blur
A soft, multi-color gradient mesh created with layered conic-gradient() and background-blend-mode: overlay. The blur filter creates the characteristic mesh look. All colors use OKLCH for perceptual uniformity.
Hero background
<section class="relative h-screen overflow-hidden">
<div class="gradient-mesh absolute inset-0 -z-10"></div>
<div class="flex h-full items-center justify-center">
<h1 class="text-5xl font-bold text-white">Your Hero Content</h1>
</div>
</section>