/* https://grabient.com/_gKagHMgKhgFcgGjgIvgPmgWIgWAf-2f8if8a?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #f988bd 0.000%, #f988bd 2.941%, #ffa3e2 calc(2.941% + 1px), #ffa3e2 5.882%, #ffbbff calc(5.882% + 1px), #ffbbff 8.824%, #ffceff calc(8.824% + 1px), #ffceff 11.765%, #ffdbff calc(11.765% + 1px), #ffdbff 14.706%, #f8e0ff calc(14.706% + 1px), #f8e0ff 17.647%, #efdeff calc(17.647% + 1px), #efdeff 20.588%, #e3d3ff calc(20.588% + 1px), #e3d3ff 23.529%, #d6c3ff calc(23.529% + 1px), #d6c3ff 26.471%, #c6acfc calc(26.471% + 1px), #c6acfc 29.412%, #b692da calc(29.412% + 1px), #b692da 32.353%, #a575b5 calc(32.353% + 1px), #a575b5 35.294%, #94598f calc(35.294% + 1px), #94598f 38.235%, #843e6b calc(38.235% + 1px), #843e6b 41.176%, #76284c calc(41.176% + 1px), #76284c 44.118%, #691733 calc(44.118% + 1px), #691733 47.059%, #5f0d23 calc(47.059% + 1px), #5f0d23 50.000%, #570b1d calc(50.000% + 1px), #570b1d 52.941%, #531021 calc(52.941% + 1px), #531021 55.882%, #511c2f calc(55.882% + 1px), #511c2f 58.824%, #532f46 calc(58.824% + 1px), #532f46 61.765%, #584764 calc(61.765% + 1px), #584764 64.706%, #5f6387 calc(64.706% + 1px), #5f6387 67.647%, #6a7fad calc(67.647% + 1px), #6a7fad 70.588%, #769bd3 calc(70.588% + 1px), #769bd3 73.529%, #85b4f5 calc(73.529% + 1px), #85b4f5 76.471%, #95c9ff calc(76.471% + 1px), #95c9ff 79.412%, #a6d8ff calc(79.412% + 1px), #a6d8ff 82.353%, #b6dfff calc(82.353% + 1px), #b6dfff 85.294%, #c7dfff calc(85.294% + 1px), #c7dfff 88.235%, #d6d7ff calc(88.235% + 1px), #d6d7ff 91.176%, #e4c8ff calc(91.176% + 1px), #e4c8ff 94.118%, #f0b4ff calc(94.118% + 1px), #f0b4ff 97.059%, #f99aea calc(97.059% + 1px) 100.000%);

["#f988bd", "#ffa3e2", "#ffbbff", "#ffceff", "#ffdbff", "#f8e0ff", "#efdeff", "#e3d3ff", "#d6c3ff", "#c6acfc", "#b692da", "#a575b5", "#94598f", "#843e6b", "#76284c", "#691733", "#5f0d23", "#570b1d", "#531021", "#511c2f", "#532f46", "#584764", "#5f6387", "#6a7fad", "#769bd3", "#85b4f5", "#95c9ff", "#a6d8ff", "#b6dfff", "#c7dfff", "#d6d7ff", "#e4c8ff", "#f0b4ff", "#f99aea"]

// https://grabient.com/_gKagHMgKhgFcgGjgIvgPmgWIgWAf-2f8if8a?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.666, 0.460, 0.673); vec3 b = vec3(0.348, 0.419, 0.559); vec3 c = vec3(0.998, 1.416, 1.408); vec3 d = vec3(-0.074, -0.222, -0.230); 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); }

Bubblegum pink to burgundy to plum gradient palette editor

Bubblegum pink to burgundy to plum