/* https://grabient.com/_gAFgDAgPOgQKgM5gHggJigJigG0fljf3agRcrdsPoJqF?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #ffffff 0.000%, #ffffff 2.941%, #ffffff calc(2.941% + 1px), #ffffff 5.882%, #ffffff calc(5.882% + 1px), #ffffff 8.824%, #ffffff calc(8.824% + 1px), #ffffff 11.765%, #ffffff calc(11.765% + 1px), #ffffff 14.706%, #ffffff calc(14.706% + 1px), #ffffff 17.647%, #ffffff calc(17.647% + 1px), #ffffff 20.588%, #ffffff calc(20.588% + 1px), #ffffff 23.529%, #ffffff calc(23.529% + 1px), #ffffff 26.471%, #ffffff calc(26.471% + 1px), #ffffff 29.412%, #ffffff calc(29.412% + 1px), #ffffff 32.353%, #ffffff calc(32.353% + 1px), #ffffff 35.294%, #ffffff calc(35.294% + 1px), #ffffff 38.235%, #ffffff calc(38.235% + 1px), #ffffff 41.176%, #ffffff calc(41.176% + 1px), #ffffff 44.118%, #fff7ff calc(44.118% + 1px), #fff7ff 47.059%, #ffedff calc(47.059% + 1px), #ffedff 50.000%, #ffe3ff calc(50.000% + 1px), #ffe3ff 52.941%, #ffd9ff calc(52.941% + 1px), #ffd9ff 55.882%, #ffcfff calc(55.882% + 1px), #ffcfff 58.824%, #ffc5ff calc(58.824% + 1px), #ffc5ff 61.765%, #ffbcff calc(61.765% + 1px), #ffbcff 64.706%, #ffb2ff calc(64.706% + 1px), #ffb2ff 67.647%, #ffa9ff calc(67.647% + 1px), #ffa9ff 70.588%, #ffa0ff calc(70.588% + 1px), #ffa0ff 73.529%, #ff97ff calc(73.529% + 1px), #ff97ff 76.471%, #f98fff calc(76.471% + 1px), #f98fff 79.412%, #ed87ff calc(79.412% + 1px), #ed87ff 82.353%, #e17fff calc(82.353% + 1px), #e17fff 85.294%, #d478ff calc(85.294% + 1px), #d478ff 88.235%, #c871ff calc(88.235% + 1px), #c871ff 91.176%, #bb6bff calc(91.176% + 1px), #bb6bff 94.118%, #af65ff calc(94.118% + 1px), #af65ff 97.059%, #a35fff calc(97.059% + 1px) 100.000%);

["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#fff7ff", "#ffedff", "#ffe3ff", "#ffd9ff", "#ffcfff", "#ffc5ff", "#ffbcff", "#ffb2ff", "#ffa9ff", "#ffa0ff", "#ff97ff", "#f98fff", "#ed87ff", "#e17fff", "#d478ff", "#c871ff", "#bb6bff", "#af65ff", "#a35fff"]

// https://grabient.com/_gAFgDAgPOgQKgM5gHggJigJigG0fljf3agRcrdsPoJqF?style=linearSwatches&steps=34&angle=90 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; const float ANGLE = 90.0; vec3 palette(float t) { vec3 a = vec3(0.738, 0.925, 1.707); vec3 b = vec3(0.810, 0.646, 0.376); vec3 c = vec3(0.318, 0.318, 0.227); vec3 d = vec3(-1.048, 0.095, 1.761); 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); }

Gradient palette editor — #ffffff to #a35fff