/* https://grabient.com/_giRf0EgOjgirgaJgA0gBngBngeQgFXgARgNacDwIvoft?style=radialSwatches&steps=34&angle=315 */ background: radial-gradient(circle, #e9b5b4 0.000%, #e9b5b4 2.941%, #dfb5b8 calc(2.941% + 1px), #dfb5b8 5.882%, #d5b5ba calc(5.882% + 1px), #d5b5ba 8.824%, #cbb4bb calc(8.824% + 1px), #cbb4bb 11.765%, #c1b4b9 calc(11.765% + 1px), #c1b4b9 14.706%, #b7b3b6 calc(14.706% + 1px), #b7b3b6 17.647%, #adb3b2 calc(17.647% + 1px), #adb3b2 20.588%, #a4b2ad calc(20.588% + 1px), #a4b2ad 23.529%, #9bb0a8 calc(23.529% + 1px), #9bb0a8 26.471%, #91afa4 calc(26.471% + 1px), #91afa4 29.412%, #88aea1 calc(29.412% + 1px), #88aea1 32.353%, #7fac9f calc(32.353% + 1px), #7fac9f 35.294%, #76aaa0 calc(35.294% + 1px), #76aaa0 38.235%, #6ea8a2 calc(38.235% + 1px), #6ea8a2 41.176%, #65a6a6 calc(41.176% + 1px), #65a6a6 44.118%, #5da4aa calc(44.118% + 1px), #5da4aa 47.059%, #55a1af calc(47.059% + 1px), #55a1af 50.000%, #4c9eb4 calc(50.000% + 1px), #4c9eb4 52.941%, #459cb8 calc(52.941% + 1px), #459cb8 55.882%, #3d99ba calc(55.882% + 1px), #3d99ba 58.824%, #3596bb calc(58.824% + 1px), #3596bb 61.765%, #2e92b9 calc(61.765% + 1px), #2e92b9 64.706%, #278fb6 calc(64.706% + 1px), #278fb6 67.647%, #208bb2 calc(67.647% + 1px), #208bb2 70.588%, #1988ad calc(70.588% + 1px), #1988ad 73.529%, #1284a8 calc(73.529% + 1px), #1284a8 76.471%, #0b80a4 calc(76.471% + 1px), #0b80a4 79.412%, #057ba1 calc(79.412% + 1px), #057ba1 82.353%, #00779f calc(82.353% + 1px), #00779f 85.294%, #0073a0 calc(85.294% + 1px), #0073a0 88.235%, #006ea2 calc(88.235% + 1px), #006ea2 91.176%, #0069a5 calc(91.176% + 1px), #0069a5 94.118%, #0064aa calc(94.118% + 1px), #0064aa 97.059%, #005faf calc(97.059% + 1px) 100.000%);

["#e9b5b4", "#dfb5b8", "#d5b5ba", "#cbb4bb", "#c1b4b9", "#b7b3b6", "#adb3b2", "#a4b2ad", "#9bb0a8", "#91afa4", "#88aea1", "#7fac9f", "#76aaa0", "#6ea8a2", "#65a6a6", "#5da4aa", "#55a1af", "#4c9eb4", "#459cb8", "#3d99ba", "#3596bb", "#2e92b9", "#278fb6", "#208bb2", "#1988ad", "#1284a8", "#0b80a4", "#057ba1", "#00779f", "#0073a0", "#006ea2", "#0069a5", "#0064aa", "#005faf"]

// https://grabient.com/_giRf0EgOjgirgaJgA0gBngBngeQgFXgARgNacDwIvoft?style=radialSwatches&steps=34&angle=315 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; vec3 palette(float t) { vec3 a = vec3(1.940, -1.017, 0.678); vec3 b = vec3(2.290, 1.727, 0.054); vec3 c = vec3(0.103, 0.103, 1.936); vec3 d = vec3(0.324, -0.002, 0.839); 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; // circle to the farthest corner (CSS default) float t = length(p) / length(0.5 * iResolution.xy); fragColor = vec4(stops(t), 1.0); }

Gradient palette editor — #e9b5b4 to #005faf