/* https://grabient.com/_gBkgEsgGQgD6gFegFegMggLugK8gImgHCgGQ?style=linearGradient&steps=50&angle=90 */
background: linear-gradient(90deg, #00001e 0.000%, #000019 2.041%, #000016 4.082%, #000012 6.122%, #000010 8.163%, #00000e 10.204%, #00000d 12.245%, #00000d 14.286%, #00000d 16.327%, #05000e 18.367%, #0b0510 20.408%, #110b12 22.449%, #181116 24.490%, #1e1819 26.531%, #251f1e 28.571%, #2b2623 30.612%, #312e28 32.653%, #37362e 34.694%, #3d3f35 36.735%, #42473c 38.776%, #475043 40.816%, #4b584a 42.857%, #4f6152 44.898%, #52695a 46.939%, #557162 48.980%, #57796a 51.020%, #588072 53.061%, #59877a 55.102%, #598d82 57.143%, #599389 59.184%, #579890 61.224%, #559c97 63.265%, #539f9e 65.306%, #50a2a4 67.347%, #4ca4a9 69.388%, #48a5ae 71.429%, #43a6b3 73.469%, #3ea5b6 75.510%, #38a4ba 77.551%, #32a2bc 79.592%, #2c9fbe 81.633%, #269bbf 83.673%, #1f97bf 85.714%, #1992bf 87.755%, #128cbe 89.796%, #0c86bc 91.837%, #057fba 93.878%, #0078b6 95.918%, #0070b3 97.959%, #0068ae 100.000%);
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
<!-- https://grabient.com/_gBkgEsgGQgD6gFegFegMggLugK8gImgHCgGQ?style=linearGradient&steps=50&angle=90 -->
<defs>
<linearGradient id="gradient" x1="0.000" y1="0.500" x2="1.000" y2="0.500">
<stop offset="0.000" stop-color="#00001e" /><stop offset="0.020" stop-color="#000019" /><stop offset="0.041" stop-color="#000016" /><stop offset="0.061" stop-color="#000012" /><stop offset="0.082" stop-color="#000010" /><stop offset="0.102" stop-color="#00000e" /><stop offset="0.122" stop-color="#00000d" /><stop offset="0.143" stop-color="#00000d" /><stop offset="0.163" stop-color="#00000d" /><stop offset="0.184" stop-color="#05000e" /><stop offset="0.204" stop-color="#0b0510" /><stop offset="0.224" stop-color="#110b12" /><stop offset="0.245" stop-color="#181116" /><stop offset="0.265" stop-color="#1e1819" /><stop offset="0.286" stop-color="#251f1e" /><stop offset="0.306" stop-color="#2b2623" /><stop offset="0.327" stop-color="#312e28" /><stop offset="0.347" stop-color="#37362e" /><stop offset="0.367" stop-color="#3d3f35" /><stop offset="0.388" stop-color="#42473c" /><stop offset="0.408" stop-color="#475043" /><stop offset="0.429" stop-color="#4b584a" /><stop offset="0.449" stop-color="#4f6152" /><stop offset="0.469" stop-color="#52695a" /><stop offset="0.490" stop-color="#557162" /><stop offset="0.510" stop-color="#57796a" /><stop offset="0.531" stop-color="#588072" /><stop offset="0.551" stop-color="#59877a" /><stop offset="0.571" stop-color="#598d82" /><stop offset="0.592" stop-color="#599389" /><stop offset="0.612" stop-color="#579890" /><stop offset="0.633" stop-color="#559c97" /><stop offset="0.653" stop-color="#539f9e" /><stop offset="0.673" stop-color="#50a2a4" /><stop offset="0.694" stop-color="#4ca4a9" /><stop offset="0.714" stop-color="#48a5ae" /><stop offset="0.735" stop-color="#43a6b3" /><stop offset="0.755" stop-color="#3ea5b6" /><stop offset="0.776" stop-color="#38a4ba" /><stop offset="0.796" stop-color="#32a2bc" /><stop offset="0.816" stop-color="#2c9fbe" /><stop offset="0.837" stop-color="#269bbf" /><stop offset="0.857" stop-color="#1f97bf" /><stop offset="0.878" stop-color="#1992bf" /><stop offset="0.898" stop-color="#128cbe" /><stop offset="0.918" stop-color="#0c86bc" /><stop offset="0.939" stop-color="#057fba" /><stop offset="0.959" stop-color="#0078b6" /><stop offset="0.980" stop-color="#0070b3" /><stop offset="1.000" stop-color="#0068ae" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#gradient)" />
</svg>
["#00001e", "#000019", "#000016", "#000012", "#000010", "#00000e", "#00000d", "#00000d", "#00000d", "#05000e", "#0b0510", "#110b12", "#181116", "#1e1819", "#251f1e", "#2b2623", "#312e28", "#37362e", "#3d3f35", "#42473c", "#475043", "#4b584a", "#4f6152", "#52695a", "#557162", "#57796a", "#588072", "#59877a", "#598d82", "#599389", "#579890", "#559c97", "#539f9e", "#50a2a4", "#4ca4a9", "#48a5ae", "#43a6b3", "#3ea5b6", "#38a4ba", "#32a2bc", "#2c9fbe", "#269bbf", "#1f97bf", "#1992bf", "#128cbe", "#0c86bc", "#057fba", "#0078b6", "#0070b3", "#0068ae"]
// https://grabient.com/_gBkgEsgGQgD6gFegFegMggLugK8gImgHCgGQ?style=linearGradient&steps=50&angle=90
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 50.0;
const float ANGLE = 90.0;
vec3 palette(float t) {
vec3 a = vec3(0.100, 0.300, 0.400);
vec3 b = vec3(0.250, 0.350, 0.350);
vec3 c = vec3(0.800, 0.750, 0.700);
vec3 d = vec3(0.550, 0.450, 0.400);
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.100, 0.300, 0.400],
[0.250, 0.350, 0.350],
[0.800, 0.750, 0.700],
[0.550, 0.450, 0.400]
]