/* https://grabient.com/_gHlgKqgDgf7Yf7CgAcgI6gHBgBQgQaguXgkT?style=angularSwatches&steps=5&angle=20 */ background: conic-gradient(from 20deg, #345f36 0.000deg, #345f36 72.000deg, #616735 calc(72.000deg + 0.1deg), #616735 144.000deg, #a29134 calc(144.000deg + 0.1deg), #a29134 216.000deg, #c6c934 calc(216.000deg + 0.1deg), #c6c934 288.000deg, #b3f433 calc(288.000deg + 0.1deg) 360.000deg);

// https://grabient.com/_gHlgKqgDgf7Yf7CgAcgI6gHBgBQgQaguXgkT?style=angularSwatches&steps=5&angle=20 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 5.0; const float ANGLE = 20.0; vec3 palette(float t) { vec3 a = vec3(0.485, 0.682, 0.224); vec3 b = vec3(-0.296, -0.318, 0.028); vec3 c = vec3(0.570, 0.449, 0.080); vec3 d = vec3(1.050, 2.967, 2.323); 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; // conic from ANGLE, clockwise from top (CSS convention) float t = fract((atan(p.x, p.y) - radians(ANGLE)) / 6.283185); fragColor = vec4(stops(t), 1.0); }

Gradient palette editor — #345f36 to #b3f433