/* https://grabient.com/_gGQgD6gBkgHCgEsgB4gK8gKKgJYgNSgM0gMg?style=linearGradient&steps=24&angle=90 */
background: linear-gradient(90deg, #a96023 0.000%, #ba6c28 4.348%, #c7762c 8.696%, #d17f30 13.043%, #d78633 17.391%, #d98a35 21.739%, #d68c37 26.087%, #d08c38 30.435%, #c68938 34.783%, #b88437 39.130%, #a77d36 43.478%, #947434 47.826%, #7f6931 52.174%, #695d2d 56.522%, #535029 60.870%, #3e4325 65.217%, #2a3520 69.565%, #19281b 73.913%, #0a1b16 78.261%, #001011 82.609%, #00060c 86.957%, #000008 91.304%, #000004 95.652%, #000001 100.000%);
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
<!-- https://grabient.com/_gGQgD6gBkgHCgEsgB4gK8gKKgJYgNSgM0gMg?style=linearGradient&steps=24&angle=90 -->
<defs>
<linearGradient id="gradient" x1="0.000" y1="0.500" x2="1.000" y2="0.500">
<stop offset="0.000" stop-color="#a96023" /><stop offset="0.043" stop-color="#ba6c28" /><stop offset="0.087" stop-color="#c7762c" /><stop offset="0.130" stop-color="#d17f30" /><stop offset="0.174" stop-color="#d78633" /><stop offset="0.217" stop-color="#d98a35" /><stop offset="0.261" stop-color="#d68c37" /><stop offset="0.304" stop-color="#d08c38" /><stop offset="0.348" stop-color="#c68938" /><stop offset="0.391" stop-color="#b88437" /><stop offset="0.435" stop-color="#a77d36" /><stop offset="0.478" stop-color="#947434" /><stop offset="0.522" stop-color="#7f6931" /><stop offset="0.565" stop-color="#695d2d" /><stop offset="0.609" stop-color="#535029" /><stop offset="0.652" stop-color="#3e4325" /><stop offset="0.696" stop-color="#2a3520" /><stop offset="0.739" stop-color="#19281b" /><stop offset="0.783" stop-color="#0a1b16" /><stop offset="0.826" stop-color="#001011" /><stop offset="0.870" stop-color="#00060c" /><stop offset="0.913" stop-color="#000008" /><stop offset="0.957" stop-color="#000004" /><stop offset="1.000" stop-color="#000001" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#gradient)" />
</svg>
["#a96023", "#ba6c28", "#c7762c", "#d17f30", "#d78633", "#d98a35", "#d68c37", "#d08c38", "#c68938", "#b88437", "#a77d36", "#947434", "#7f6931", "#695d2d", "#535029", "#3e4325", "#2a3520", "#19281b", "#0a1b16", "#001011", "#00060c", "#000008", "#000004", "#000001"]
// https://grabient.com/_gGQgD6gBkgHCgEsgB4gK8gKKgJYgNSgM0gMg?style=linearGradient&steps=24&angle=90
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 24.0;
const float ANGLE = 90.0;
vec3 palette(float t) {
vec3 a = vec3(0.400, 0.250, 0.100);
vec3 b = vec3(0.450, 0.300, 0.120);
vec3 c = vec3(0.700, 0.650, 0.600);
vec3 d = vec3(0.850, 0.820, 0.800);
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.250, 0.100],
[0.450, 0.300, 0.120],
[0.700, 0.650, 0.600],
[0.850, 0.820, 0.800]
]