/* https://grabient.com/_gDlgDbgBpgCDgBVgEPgMOgOQgHugNNgFugLe?style=linearSwatches&steps=7&angle=45 */ background: linear-gradient(45deg, #4d2914 0.000%, #4d2914 14.286%, #5b2237 calc(14.286% + 1px), #5b2237 28.571%, #552d52 calc(28.571% + 1px), #552d52 42.857%, #3d415f calc(42.857% + 1px), #3d415f 57.143%, #244d5a calc(57.143% + 1px), #244d5a 71.429%, #194745 calc(71.429% + 1px), #194745 85.714%, #233424 calc(85.714% + 1px) 100.000%);

// https://grabient.com/_gDlgDbgBpgCDgBVgEPgMOgOQgHugNNgFugLe?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.229, 0.219, 0.105); vec3 b = vec3(0.131, 0.085, 0.271); vec3 c = vec3(0.782, 0.912, 0.494); vec3 d = vec3(0.845, 0.366, 0.734); 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 chocolate brown to dark gray blue to dark teal to very dark green gradient palette editor

Rainbow chocolate brown to dark gray blue to dark teal to very dark green