/* https://grabient.com/_gAAgAAgFvfwsfySf-FgQjfZjhSOgC3gD0fuygAvopVgA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #000044 0.000%, #000044 2.941%, #00003e calc(2.941% + 1px), #00003e 5.882%, #000043 calc(5.882% + 1px), #000043 8.824%, #000051 calc(8.824% + 1px), #000051 11.765%, #0f0063 calc(11.765% + 1px), #0f0063 14.706%, #2d0074 calc(14.706% + 1px), #2d0074 17.647%, #4a007c calc(17.647% + 1px), #4a007c 20.588%, #66007a calc(20.588% + 1px), #66007a 23.529%, #81006e calc(23.529% + 1px), #81006e 26.471%, #9a005d calc(26.471% + 1px), #9a005d 29.412%, #b0004b calc(29.412% + 1px), #b0004b 32.353%, #c40040 calc(32.353% + 1px), #c40040 35.294%, #d5383f calc(35.294% + 1px), #d5383f 38.235%, #e37249 calc(38.235% + 1px), #e37249 41.176%, #eea35a calc(41.176% + 1px), #eea35a 44.118%, #f6c76c calc(44.118% + 1px), #f6c76c 47.059%, #f9db79 calc(47.059% + 1px), #f9db79 50.000%, #fadf7d calc(50.000% + 1px), #fadf7d 52.941%, #f6d176 calc(52.941% + 1px), #f6d176 55.882%, #efb466 calc(55.882% + 1px), #efb466 58.824%, #e58854 calc(58.824% + 1px), #e58854 61.765%, #d75145 calc(61.765% + 1px), #d75145 64.706%, #c6143e calc(64.706% + 1px), #c6143e 67.647%, #b20043 calc(67.647% + 1px), #b20043 70.588%, #9c0051 calc(70.588% + 1px), #9c0051 73.529%, #830063 calc(73.529% + 1px), #830063 76.471%, #690073 calc(76.471% + 1px), #690073 79.412%, #4d007c calc(79.412% + 1px), #4d007c 82.353%, #30007a calc(82.353% + 1px), #30007a 85.294%, #12006f calc(85.294% + 1px), #12006f 88.235%, #00005d calc(88.235% + 1px), #00005d 91.176%, #00004b calc(91.176% + 1px), #00004b 94.118%, #000040 calc(94.118% + 1px), #000040 97.059%, #00003f calc(97.059% + 1px) 100.000%);

["#000044", "#00003e", "#000043", "#000051", "#0f0063", "#2d0074", "#4a007c", "#66007a", "#81006e", "#9a005d", "#b0004b", "#c40040", "#d5383f", "#e37249", "#eea35a", "#f6c76c", "#f9db79", "#fadf7d", "#f6d176", "#efb466", "#e58854", "#d75145", "#c6143e", "#b20043", "#9c0051", "#830063", "#690073", "#4d007c", "#30007a", "#12006f", "#00005d", "#00004b", "#000040", "#00003f"]

// https://grabient.com/_gAAgAAgFvfwsfySf-FgQjfZjhSOgC3gD0fuygAvopVgA?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.000, 0.000, 0.367); vec3 b = vec3(-0.980, -0.878, -0.123); vec3 c = vec3(0.632, -1.469, 3.141); vec3 d = vec3(0.183, 0.244, -1.102); 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); }

Night blue to rose red to sandy gradient palette editor

Night blue to rose red to sandy