/* https://grabient.com/_gGQgEsgEYgGQgEYgD6gKKgJYgImgNSgMggMM?style=linearGradient&steps=24&angle=180 */
background: linear-gradient(180deg, #a26353 0.000%, #b06d5d 4.348%, #bb7765 8.696%, #c4806d 13.043%, #c98775 17.391%, #cc8d7b 21.739%, #cb9180 26.087%, #c79384 30.435%, #c19486 34.783%, #b79287 39.130%, #ab8f87 43.478%, #9c8a85 47.826%, #8c8382 52.174%, #7b7a7d 56.522%, #697177 60.870%, #576670 65.217%, #455b69 69.565%, #354f60 73.913%, #264457 78.261%, #19384e 82.609%, #0e2d44 86.957%, #06233b 91.304%, #021a31 95.652%, #001329 100.000%);
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
<!-- https://grabient.com/_gGQgEsgEYgGQgEYgD6gKKgJYgImgNSgMggMM?style=linearGradient&steps=24&angle=180 -->
<defs>
<linearGradient id="gradient" x1="0.500" y1="0.000" x2="0.500" y2="1.000">
<stop offset="0.000" stop-color="#a26353" /><stop offset="0.043" stop-color="#b06d5d" /><stop offset="0.087" stop-color="#bb7765" /><stop offset="0.130" stop-color="#c4806d" /><stop offset="0.174" stop-color="#c98775" /><stop offset="0.217" stop-color="#cc8d7b" /><stop offset="0.261" stop-color="#cb9180" /><stop offset="0.304" stop-color="#c79384" /><stop offset="0.348" stop-color="#c19486" /><stop offset="0.391" stop-color="#b79287" /><stop offset="0.435" stop-color="#ab8f87" /><stop offset="0.478" stop-color="#9c8a85" /><stop offset="0.522" stop-color="#8c8382" /><stop offset="0.565" stop-color="#7b7a7d" /><stop offset="0.609" stop-color="#697177" /><stop offset="0.652" stop-color="#576670" /><stop offset="0.696" stop-color="#455b69" /><stop offset="0.739" stop-color="#354f60" /><stop offset="0.783" stop-color="#264457" /><stop offset="0.826" stop-color="#19384e" /><stop offset="0.870" stop-color="#0e2d44" /><stop offset="0.913" stop-color="#06233b" /><stop offset="0.957" stop-color="#021a31" /><stop offset="1.000" stop-color="#001329" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#gradient)" />
</svg>
["#a26353", "#b06d5d", "#bb7765", "#c4806d", "#c98775", "#cc8d7b", "#cb9180", "#c79384", "#c19486", "#b79287", "#ab8f87", "#9c8a85", "#8c8382", "#7b7a7d", "#697177", "#576670", "#455b69", "#354f60", "#264457", "#19384e", "#0e2d44", "#06233b", "#021a31", "#001329"]
// https://grabient.com/_gGQgEsgEYgGQgEYgD6gKKgJYgImgNSgMggMM?style=linearGradient&steps=24&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 24.0;
const float ANGLE = 180.0;
vec3 palette(float t) {
vec3 a = vec3(0.400, 0.300, 0.280);
vec3 b = vec3(0.400, 0.280, 0.250);
vec3 c = vec3(0.650, 0.600, 0.550);
vec3 d = vec3(0.850, 0.800, 0.780);
return a + b * cos(6.283185 * (c * t + d));
}
// N stops sampled from the palette, blended like the CSS gradient
vec3 stops(float t) {
float n = STEPS - 1.0;
float x = clamp(t, 0.0, 1.0) * n;
return mix(palette(floor(x) / n), palette(min(floor(x) + 1.0, n) / n), fract(x));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 p = fragCoord - 0.5 * iResolution.xy;
// CSS angle: 0 = up, clockwise; span = CSS gradient-line length
vec2 dir = vec2(sin(radians(ANGLE)), cos(radians(ANGLE)));
float len = abs(iResolution.x * dir.x) + abs(iResolution.y * dir.y);
float t = dot(p, dir) / len + 0.5;
fragColor = vec4(stops(t), 1.0);
}
[
[0.400, 0.300, 0.280],
[0.400, 0.280, 0.250],
[0.650, 0.600, 0.550],
[0.850, 0.800, 0.780]
]