/* https://grabient.com/_gIagH1gJDgJtgL4gIjgDFgFrgDZhBdggugAAgAuewIgA?style=linearSwatches&steps=34&angle=135 */ background: linear-gradient(135deg, #c0ffff 0.000%, #c0ffff 2.941%, #bbffff calc(2.941% + 1px), #bbffff 5.882%, #b5ffff calc(5.882% + 1px), #b5ffff 8.824%, #b0fcff calc(8.824% + 1px), #b0fcff 11.765%, #aaf3ff calc(11.765% + 1px), #aaf3ff 14.706%, #a5e9ff calc(14.706% + 1px), #a5e9ff 17.647%, #9fdeff calc(17.647% + 1px), #9fdeff 20.588%, #9ad3ff calc(20.588% + 1px), #9ad3ff 23.529%, #94c7ff calc(23.529% + 1px), #94c7ff 26.471%, #8ebbff calc(26.471% + 1px), #8ebbff 29.412%, #89afff calc(29.412% + 1px), #89afff 32.353%, #83a3ff calc(32.353% + 1px), #83a3ff 35.294%, #7d96ff calc(35.294% + 1px), #7d96ff 38.235%, #7889ff calc(38.235% + 1px), #7889ff 41.176%, #727cfe calc(41.176% + 1px), #727cfe 44.118%, #6c70fb calc(44.118% + 1px), #6c70fb 47.059%, #6763f8 calc(47.059% + 1px), #6763f8 50.000%, #6156f4 calc(50.000% + 1px), #6156f4 52.941%, #5c4af1 calc(52.941% + 1px), #5c4af1 55.882%, #573eed calc(55.882% + 1px), #573eed 58.824%, #5132e9 calc(58.824% + 1px), #5132e9 61.765%, #4c27e4 calc(61.765% + 1px), #4c27e4 64.706%, #471ce0 calc(64.706% + 1px), #471ce0 67.647%, #4212dc calc(67.647% + 1px), #4212dc 70.588%, #3d08d7 calc(70.588% + 1px), #3d08d7 73.529%, #3800d2 calc(73.529% + 1px), #3800d2 76.471%, #3400cd calc(76.471% + 1px), #3400cd 79.412%, #2f00c8 calc(79.412% + 1px), #2f00c8 82.353%, #2b00c3 calc(82.353% + 1px), #2b00c3 85.294%, #2600be calc(85.294% + 1px), #2600be 88.235%, #2200b9 calc(88.235% + 1px), #2200b9 91.176%, #1e00b3 calc(91.176% + 1px), #1e00b3 94.118%, #1b00ae calc(94.118% + 1px), #1b00ae 97.059%, #1700a9 calc(97.059% + 1px) 100.000%);

["#c0ffff", "#bbffff", "#b5ffff", "#b0fcff", "#aaf3ff", "#a5e9ff", "#9fdeff", "#9ad3ff", "#94c7ff", "#8ebbff", "#89afff", "#83a3ff", "#7d96ff", "#7889ff", "#727cfe", "#6c70fb", "#6763f8", "#6156f4", "#5c4af1", "#573eed", "#5132e9", "#4c27e4", "#471ce0", "#4212dc", "#3d08d7", "#3800d2", "#3400cd", "#2f00c8", "#2b00c3", "#2600be", "#2200b9", "#1e00b3", "#1b00ae", "#1700a9"]

// https://grabient.com/_gIagH1gJDgJtgL4gIjgDFgFrgDZhBdggugAAgAuewIgA?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.538, 0.501, 0.579); vec3 b = vec3(0.575, 0.704, 0.507); vec3 c = vec3(0.203, 0.375, 0.224); vec3 d = vec3(4.189, 2.094, 0.000); 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); }

Neon ocean eggshell blue to soft blue to cobalt blue gradient palette editor

Neon ocean eggshell blue to soft blue to cobalt blue