/* https://grabient.com/_gH8gEXgF_f51f7ngELgJff5Mf4Jf9rf9Ef_N?style=linearSwatches&steps=26&angle=150 */
background: linear-gradient(150deg, #462ca2 0.000%, #462ca2 3.846%, #3a339f calc(3.846% + 1px), #3a339f 7.692%, #303b9b calc(7.692% + 1px), #303b9b 11.538%, #284396 calc(11.538% + 1px), #284396 15.385%, #224b90 calc(15.385% + 1px), #224b90 19.231%, #1e5289 calc(19.231% + 1px), #1e5289 23.077%, #1d5a82 calc(23.077% + 1px), #1d5a82 26.923%, #1e627a calc(26.923% + 1px), #1e627a 30.769%, #216972 calc(30.769% + 1px), #216972 34.615%, #266f69 calc(34.615% + 1px), #266f69 38.462%, #2e7661 calc(38.462% + 1px), #2e7661 42.308%, #377b58 calc(42.308% + 1px), #377b58 46.154%, #428050 calc(46.154% + 1px), #428050 50.000%, #4f8548 calc(50.000% + 1px), #4f8548 53.846%, #5d8840 calc(53.846% + 1px), #5d8840 57.692%, #6c8b39 calc(57.692% + 1px), #6c8b39 61.538%, #7b8d32 calc(61.538% + 1px), #7b8d32 65.385%, #8a8e2c calc(65.385% + 1px), #8a8e2c 69.231%, #998f27 calc(69.231% + 1px), #998f27 73.077%, #a88e23 calc(73.077% + 1px), #a88e23 76.923%, #b68d20 calc(76.923% + 1px), #b68d20 80.769%, #c28b1f calc(80.769% + 1px), #c28b1f 84.615%, #cd881e calc(84.615% + 1px), #cd881e 88.462%, #d6841e calc(88.462% + 1px), #d6841e 92.308%, #de7f1f calc(92.308% + 1px), #de7f1f 96.154%, #e37a21 calc(96.154% + 1px) 100.000%);
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
<!-- https://grabient.com/_gH8gEXgF_f51f7ngELgJff5Mf4Jf9rf9Ef_N?style=linearSwatches&steps=26&angle=150 -->
<defs>
<clipPath id="bounds">
<rect x="0" y="0" width="800" height="400" />
</clipPath>
</defs>
<g clip-path="url(#bounds)"><path d="M -173.901,100.402 L 600.696,-346.812 L 615.050,-321.950 L -159.547,125.264 Z" fill="#462ca2" fill-opacity="1.000" /><path d="M -159.547,125.264 L 615.050,-321.950 L 629.404,-297.088 L -145.193,150.126 Z" fill="#3a339f" fill-opacity="1.000" /><path d="M -145.193,150.126 L 629.404,-297.088 L 643.758,-272.226 L -130.839,174.988 Z" fill="#303b9b" fill-opacity="1.000" /><path d="M -130.839,174.988 L 643.758,-272.226 L 658.112,-247.364 L -116.485,199.849 Z" fill="#284396" fill-opacity="1.000" /><path d="M -116.485,199.849 L 658.112,-247.364 L 672.466,-222.502 L -102.131,224.711 Z" fill="#224b90" fill-opacity="1.000" /><path d="M -102.131,224.711 L 672.466,-222.502 L 686.820,-197.640 L -87.777,249.573 Z" fill="#1e5289" fill-opacity="1.000" /><path d="M -87.777,249.573 L 686.820,-197.640 L 701.174,-172.778 L -73.423,274.435 Z" fill="#1d5a82" fill-opacity="1.000" /><path d="M -73.423,274.435 L 701.174,-172.778 L 715.528,-147.916 L -59.069,299.297 Z" fill="#1e627a" fill-opacity="1.000" /><path d="M -59.069,299.297 L 715.528,-147.916 L 729.882,-123.055 L -44.715,324.159 Z" fill="#216972" fill-opacity="1.000" /><path d="M -44.715,324.159 L 729.882,-123.055 L 744.236,-98.193 L -30.360,349.021 Z" fill="#266f69" fill-opacity="1.000" /><path d="M -30.360,349.021 L 744.236,-98.193 L 758.590,-73.331 L -16.006,373.883 Z" fill="#2e7661" fill-opacity="1.000" /><path d="M -16.006,373.883 L 758.590,-73.331 L 772.944,-48.469 L -1.652,398.745 Z" fill="#377b58" fill-opacity="1.000" /><path d="M -1.652,398.745 L 772.944,-48.469 L 787.298,-23.607 L 12.702,423.607 Z" fill="#428050" fill-opacity="1.000" /><path d="M 12.702,423.607 L 787.298,-23.607 L 801.652,1.255 L 27.056,448.469 Z" fill="#4f8548" fill-opacity="1.000" /><path d="M 27.056,448.469 L 801.652,1.255 L 816.006,26.117 L 41.410,473.331 Z" fill="#5d8840" fill-opacity="1.000" /><path d="M 41.410,473.331 L 816.006,26.117 L 830.360,50.979 L 55.764,498.193 Z" fill="#6c8b39" fill-opacity="1.000" /><path d="M 55.764,498.193 L 830.360,50.979 L 844.715,75.841 L 70.118,523.055 Z" fill="#7b8d32" fill-opacity="1.000" /><path d="M 70.118,523.055 L 844.715,75.841 L 859.069,100.703 L 84.472,547.916 Z" fill="#8a8e2c" fill-opacity="1.000" /><path d="M 84.472,547.916 L 859.069,100.703 L 873.423,125.565 L 98.826,572.778 Z" fill="#998f27" fill-opacity="1.000" /><path d="M 98.826,572.778 L 873.423,125.565 L 887.777,150.427 L 113.180,597.640 Z" fill="#a88e23" fill-opacity="1.000" /><path d="M 113.180,597.640 L 887.777,150.427 L 902.131,175.289 L 127.534,622.502 Z" fill="#b68d20" fill-opacity="1.000" /><path d="M 127.534,622.502 L 902.131,175.289 L 916.485,200.151 L 141.888,647.364 Z" fill="#c28b1f" fill-opacity="1.000" /><path d="M 141.888,647.364 L 916.485,200.151 L 930.839,225.012 L 156.242,672.226 Z" fill="#cd881e" fill-opacity="1.000" /><path d="M 156.242,672.226 L 930.839,225.012 L 945.193,249.874 L 170.596,697.088 Z" fill="#d6841e" fill-opacity="1.000" /><path d="M 170.596,697.088 L 945.193,249.874 L 959.547,274.736 L 184.950,721.950 Z" fill="#de7f1f" fill-opacity="1.000" /><path d="M 184.950,721.950 L 959.547,274.736 L 973.901,299.598 L 199.304,746.812 Z" fill="#e37a21" fill-opacity="1.000" /></g>
</svg>
["#462ca2", "#3a339f", "#303b9b", "#284396", "#224b90", "#1e5289", "#1d5a82", "#1e627a", "#216972", "#266f69", "#2e7661", "#377b58", "#428050", "#4f8548", "#5d8840", "#6c8b39", "#7b8d32", "#8a8e2c", "#998f27", "#a88e23", "#b68d20", "#c28b1f", "#cd881e", "#d6841e", "#de7f1f", "#e37a21"]
// https://grabient.com/_gH8gEXgF_f51f7ngELgJff5Mf4Jf9rf9Ef_N?style=linearSwatches&steps=26&angle=150
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 26.0;
const float ANGLE = 150.0;
vec3 palette(float t) {
vec3 a = vec3(0.508, 0.279, 0.383);
vec3 b = vec3(-0.395, -0.281, 0.267);
vec3 c = vec3(0.607, -0.436, -0.503);
vec3 d = vec3(-0.149, -0.188, -0.051);
return a + b * cos(6.283185 * (c * t + d));
}
// N hard swatches sampled from the palette
vec3 stops(float t) {
float i = min(floor(clamp(t, 0.0, 1.0) * STEPS), STEPS - 1.0);
return palette(i / (STEPS - 1.0));
}
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.508, 0.279, 0.383],
[-0.395, -0.281, 0.267],
[0.607, -0.436, -0.503],
[-0.149, -0.188, -0.051]
]