/* https://grabient.com/_gKngBvgKGgIZgJCgFegKmgG5gNGgDmgL0gK4?style=linearSwatches&steps=7&angle=45 */ background: linear-gradient(45deg, #be2287 0.000%, #be2287 14.286%, #6263d2 calc(14.286% + 1px), #6263d2 28.571%, #2995fd calc(28.571% + 1px), #2995fd 42.857%, #31aee8 calc(42.857% + 1px), #31aee8 57.143%, #74a8a2 calc(57.143% + 1px), #74a8a2 71.429%, #d3865e calc(71.429% + 1px), #d3865e 85.714%, #ff4c4e calc(85.714% + 1px) 100.000%);

// https://grabient.com/_gKngBvgKGgIZgJCgFegKmgG5gNGgDmgL0gK4?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.679, 0.111, 0.646); vec3 b = vec3(0.537, 0.578, 0.350); vec3 c = vec3(0.678, 0.441, 0.838); vec3 d = vec3(0.230, 0.756, 0.696); 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 medium violet red to dark periwinkle to deep sky blue to light red gradient palette editor

Rainbow medium violet red to dark periwinkle to deep sky blue to light red