/* https://grabient.com/_gFsgFigJQgHHgHUgDggHegHtgLogJhgMYgPG?style=linearSwatches&steps=7&angle=45 */ background: linear-gradient(45deg, #0379cf 0.000%, #0379cf 14.286%, #31aec7 calc(14.286% + 1px), #31aec7 28.571%, #6acda4 calc(28.571% + 1px), #6acda4 42.857%, #a0ce79 calc(42.857% + 1px), #a0ce79 57.143%, #c5b15f calc(57.143% + 1px), #c5b15f 71.429%, #d17d66 calc(71.429% + 1px), #d17d66 85.714%, #c04089 calc(85.714% + 1px) 100.000%);

// https://grabient.com/_gFsgFigJQgHHgHUgDggHegHtgLogJhgMYgPG?style=linearSwatches&steps=7&angle=45 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 7.0; const float ANGLE = 45.0; vec3 palette(float t) { vec3 a = vec3(0.364, 0.354, 0.592); vec3 b = vec3(0.455, 0.468, 0.224); vec3 c = vec3(0.478, 0.493, 0.744); vec3 d = vec3(0.609, 0.792, 0.966); 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 windows blue to light moss green to brownish pink to medium violet red gradient palette editor

Rainbow windows blue to light moss green to brownish pink to medium violet red