Home › Templates › Caustics Depth
Caustics Depth
Near-black water with faint pale streaks, for a background that stays behind the type.
CSS
.gradient-container {
position: relative;
width: 100%;
height: 100vh;
background: radial-gradient(circle at 50% 55%, #4b5043 0%, #1a1d16 55%, #090909 100%),
#090909;
opacity: 1;
mix-blend-mode: normal;
}
/* @liveStyle:caustics */
/* @designState: {"gradientSmoothness":55,"animatedParams":{"scale":1.15,"speed":0.16,"grain":0.2,"vignette":1.1,"interact":0.45,"panX":0.5,"panY":0.5,"cursorMode":"wave","cursorFx":"none","grainType":"none","pattern":"none","patternScale":1,"patternOpacity":0.15},"colorStops":[0,55,100]} */What is the Caustics Depth gradient?
Near-black water with faint pale streaks, for a background that stays behind the type.
How to use Caustics Depth
Customize this gradient in the studio, copy the CSS on this page, or download a marked 1920px PNG. 4K and SVG stay on Pro.
Related gradients
Canyon SunriseA hot magenta core fading to black at the edges, with a fine dot grid, for a launch hero that only needs one color.
Wave CausticsA black field with a pale gray sweep of light through the middle, for a dark thumbnail.
Ember GrainDusty red sinking into black, a dark field for feeds where white type has to stay readable.
VolcanicOrange and a streak of red coming out of black in one corner, loud on purpose, for thumbnails.
Regalia BarsMauve on the left easing into pale gold, soft enough that it reads as one wash, for a dark editorial header.
Purple DotsDeep purple with a fine dot grid, slightly darker toward the middle, for a poster or a thumbnail.
Purple CheckerViolet checker, brightest along the bottom edge and black in the top corner, for a social graphic.
Updated October 2026
