/* https://grabient.com/_gM4gNQgLAgC5gC7gDZgIxgNSgL3gO0gGmgDz?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #ffaeb6 0.000%, #ffaeb6 2.941%, #ffabae calc(2.941% + 1px), #ffabae 5.882%, #ffa9a6 calc(5.882% + 1px), #ffa9a6 8.824%, #ffa99f calc(8.824% + 1px), #ffa99f 11.765%, #ffa997 calc(11.765% + 1px), #ffa997 14.706%, #ffab91 calc(14.706% + 1px), #ffab91 17.647%, #ffae8b calc(17.647% + 1px), #ffae8b 20.588%, #fdb286 calc(20.588% + 1px), #fdb286 23.529%, #fbb782 calc(23.529% + 1px), #fbb782 26.471%, #f8bd7f calc(26.471% + 1px), #f8bd7f 29.412%, #f5c47d calc(29.412% + 1px), #f5c47d 32.353%, #f1cb7c calc(32.353% + 1px), #f1cb7c 35.294%, #edd37d calc(35.294% + 1px), #edd37d 38.235%, #e9da7e calc(38.235% + 1px), #e9da7e 41.176%, #e5e281 calc(41.176% + 1px), #e5e281 44.118%, #e0e984 calc(44.118% + 1px), #e0e984 47.059%, #dbf089 calc(47.059% + 1px), #dbf089 50.000%, #d6f78f calc(50.000% + 1px), #d6f78f 52.941%, #d1fc95 calc(52.941% + 1px), #d1fc95 55.882%, #ccff9c calc(55.882% + 1px), #ccff9c 58.824%, #c7ffa3 calc(58.824% + 1px), #c7ffa3 61.765%, #c2ffab calc(61.765% + 1px), #c2ffab 64.706%, #bdffb3 calc(64.706% + 1px), #bdffb3 67.647%, #b9ffbb calc(67.647% + 1px), #b9ffbb 70.588%, #b5ffc3 calc(70.588% + 1px), #b5ffc3 73.529%, #b1ffca calc(73.529% + 1px), #b1ffca 76.471%, #aeffd1 calc(76.471% + 1px), #aeffd1 79.412%, #abfcd8 calc(79.412% + 1px), #abfcd8 82.353%, #a8f6dd calc(82.353% + 1px), #a8f6dd 85.294%, #a6efe2 calc(85.294% + 1px), #a6efe2 88.235%, #a5e8e6 calc(88.235% + 1px), #a5e8e6 91.176%, #a4e1e9 calc(91.176% + 1px), #a4e1e9 94.118%, #a3d9ea calc(94.118% + 1px), #a3d9ea 97.059%, #a3d2eb calc(97.059% + 1px) 100.000%);

["#ffaeb6", "#ffabae", "#ffa9a6", "#ffa99f", "#ffa997", "#ffab91", "#ffae8b", "#fdb286", "#fbb782", "#f8bd7f", "#f5c47d", "#f1cb7c", "#edd37d", "#e9da7e", "#e5e281", "#e0e984", "#dbf089", "#d6f78f", "#d1fc95", "#ccff9c", "#c7ffa3", "#c2ffab", "#bdffb3", "#b9ffbb", "#b5ffc3", "#b1ffca", "#aeffd1", "#abfcd8", "#a8f6dd", "#a6efe2", "#a5e8e6", "#a4e1e9", "#a3d9ea", "#a3d2eb"]

// https://grabient.com/_gM4gNQgLAgC5gC7gDZgIxgNSgL3gO0gGmgDz?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.824, 0.848, 0.704); vec3 b = vec3(0.185, 0.187, 0.217); vec3 c = vec3(0.561, 0.850, 0.759); vec3 d = vec3(0.948, 0.422, 0.243); 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); }

Rainbow soft pink to sand to celery to light blue gradient palette editor

Rainbow soft pink to sand to celery to light blue