/* https://grabient.com/_gPdgHzgIJgL_gDVgO9gCugB9gAPgIihImhqQ?style=linearSwatches&steps=34&angle=135 */ background: linear-gradient(135deg, #415ed0 0.000%, #415ed0 2.941%, #435fd1 calc(2.941% + 1px), #435fd1 5.882%, #4560d2 calc(5.882% + 1px), #4560d2 8.824%, #4761d2 calc(8.824% + 1px), #4761d2 11.765%, #4a62d3 calc(11.765% + 1px), #4a62d3 14.706%, #4c64d4 calc(14.706% + 1px), #4c64d4 17.647%, #4f65d4 calc(17.647% + 1px), #4f65d4 20.588%, #5366d5 calc(20.588% + 1px), #5366d5 23.529%, #5667d6 calc(23.529% + 1px), #5667d6 26.471%, #5968d6 calc(26.471% + 1px), #5968d6 29.412%, #5d69d7 calc(29.412% + 1px), #5d69d7 32.353%, #616bd8 calc(32.353% + 1px), #616bd8 35.294%, #656cd8 calc(35.294% + 1px), #656cd8 38.235%, #696dd9 calc(38.235% + 1px), #696dd9 41.176%, #6d6ed9 calc(41.176% + 1px), #6d6ed9 44.118%, #726fda calc(44.118% + 1px), #726fda 47.059%, #7771db calc(47.059% + 1px), #7771db 50.000%, #7b72db calc(50.000% + 1px), #7b72db 52.941%, #8073dc calc(52.941% + 1px), #8073dc 55.882%, #8574dd calc(55.882% + 1px), #8574dd 58.824%, #8b76dd calc(58.824% + 1px), #8b76dd 61.765%, #9077de calc(61.765% + 1px), #9077de 64.706%, #9578df calc(64.706% + 1px), #9578df 67.647%, #9b79df calc(67.647% + 1px), #9b79df 70.588%, #a17be0 calc(70.588% + 1px), #a17be0 73.529%, #a77ce1 calc(73.529% + 1px), #a77ce1 76.471%, #ac7de1 calc(76.471% + 1px), #ac7de1 79.412%, #b27fe2 calc(79.412% + 1px), #b27fe2 82.353%, #b880e3 calc(82.353% + 1px), #b880e3 85.294%, #be81e3 calc(85.294% + 1px), #be81e3 88.235%, #c583e4 calc(88.235% + 1px), #c583e4 91.176%, #cb84e4 calc(91.176% + 1px), #cb84e4 94.118%, #d185e5 calc(94.118% + 1px), #d185e5 97.059%, #d886e6 calc(97.059% + 1px) 100.000%);

["#415ed0", "#435fd1", "#4560d2", "#4761d2", "#4a62d3", "#4c64d4", "#4f65d4", "#5366d5", "#5667d6", "#5968d6", "#5d69d7", "#616bd8", "#656cd8", "#696dd9", "#6d6ed9", "#726fda", "#7771db", "#7b72db", "#8073dc", "#8574dd", "#8b76dd", "#9077de", "#9578df", "#9b79df", "#a17be0", "#a77ce1", "#ac7de1", "#b27fe2", "#b880e3", "#be81e3", "#c583e4", "#cb84e4", "#d185e5", "#d886e6"]

// https://grabient.com/_gPdgHzgIJgL_gDVgO9gCugB9gAPgIihImhqQ?style=linearSwatches&steps=34&angle=135 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; const float ANGLE = 135.0; vec3 palette(float t) { vec3 a = vec3(0.989, 0.499, 0.521); vec3 b = vec3(0.767, 0.213, 0.957); vec3 c = vec3(0.174, 0.125, 0.015); vec3 d = vec3(0.546, 4.646, 6.800); 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); }

Warm blue to medium purple to lavender pink gradient palette editor

Warm blue to medium purple to lavender pink