नया
ग्रेडिएंटAnimated Gradient Blobs
Blurred colour blobs drifting on twenty-second loops behind ordinary, fully legible content.
#gradient#blobs#animated
3 फ्रेमवर्कमध्यम
Loading…
Three blurred radial pools over an opaque base - a mesh section that never has to fight its own text for contrast.
<!--
A mesh is stacked radial gradients, not an image: three blurred, low-opacity
pools over an opaque base. The opacity cap IS the contrast strategy - the
text sits on the base surface, and no pool is allowed to get saturated enough
to drag it below AA, so no scrim layer is needed. Turn a pool up past ~40%
and that stops being true.
-->
<section class="gradient-mesh">
<div class="gradient-mesh__pools" aria-hidden="true">
<div class="gradient-mesh__pool gradient-mesh__pool--a"></div>
<div class="gradient-mesh__pool gradient-mesh__pool--b"></div>
<div class="gradient-mesh__pool gradient-mesh__pool--c"></div>
</div>
<div class="gradient-mesh__content">
<p class="gradient-mesh__kicker">Platform</p>
<h2 class="gradient-mesh__title">One surface for every team</h2>
<p class="gradient-mesh__copy">
Plan, build and measure on a single canvas - the mesh stays in the
background, where it belongs.
</p>
</div>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Move the pools by editing their inset classes (`-left-20 -top-20`, etc.) and recolour them inside the `radial-gradient()` arbitrary values - the alpha in each `rgba()` is the one number to respect. The opacity cap is the contrast strategy: the text sits on the opaque base surface, and at ≤ 0.35 no pool can drag it below AA in either theme, which is why there is no scrim layer. Push a pool past ~40% and you have silently traded that guarantee away - add a scrim or re-check contrast if you do. The pools deliberately survive the theme switch untouched: at these opacities they read as tint on white and as glow on near-black, so only the base and the text flip. `overflow-hidden` on the section is load-bearing - the pools hang off all four edges.