/* https://grabient.com/_fLdgKQgJLhEogBhgBOgBggW7ghGgPggA2gI3?style=angularGradient&steps=9&angle=225 */
background: conic-gradient(from 225deg, #ffbf84 0.000deg, #ffa99f 45.000deg, #ff92a6 90.000deg, #f59489 135.000deg, #e3ad88 180.000deg, #cbc0a5 225.000deg, #adb5a1 270.000deg, #899a84 315.000deg, #608f8e 360.000deg);
<svg width="800" height="400" viewBox="0 0 800 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- https://grabient.com/_fLdgKQgJLhEogBhgBOgBggW7ghGgPggA2gI3?style=angularGradient&steps=9&angle=225 -->
<g clip-path="url(#paint0_angular_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.139677 0.139677 -0.139677 -0.139677 400.000000 200.000000)"><foreignObject x="-2264" y="-2264" width="4528" height="4528"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(255, 191, 132, 1) 0.000000deg,rgba(255, 169, 159, 1) 45.000000deg,rgba(255, 146, 166, 1) 90.000000deg,rgba(245, 148, 137, 1) 135.000000deg,rgba(227, 173, 136, 1) 180.000000deg,rgba(203, 192, 165, 1) 225.000000deg,rgba(173, 181, 161, 1) 270.000000deg,rgba(137, 154, 132, 1) 315.000000deg,rgba(96, 143, 142, 1) 360.000000deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><rect width="800" height="400" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1,"g":0.7490196078431373,"b":0.5176470588235295,"a":1},"position":0},{"color":{"r":1,"g":0.6627450980392157,"b":0.6235294117647059,"a":1},"position":0.125},{"color":{"r":1,"g":0.5725490196078431,"b":0.6509803921568628,"a":1},"position":0.25},{"color":{"r":0.9607843137254902,"g":0.5803921568627451,"b":0.5372549019607843,"a":1},"position":0.375},{"color":{"r":0.8901960784313725,"g":0.6784313725490196,"b":0.5333333333333333,"a":1},"position":0.5},{"color":{"r":0.796078431372549,"g":0.7529411764705882,"b":0.6470588235294118,"a":1},"position":0.625},{"color":{"r":0.6784313725490196,"g":0.7098039215686275,"b":0.6313725490196078,"a":1},"position":0.75},{"color":{"r":0.5372549019607843,"g":0.6039215686274509,"b":0.5176470588235295,"a":1},"position":0.875},{"color":{"r":0.3764705882352941,"g":0.5607843137254902,"b":0.5568627450980392,"a":1},"position":1}],"stopsVar":[{"color":{"r":1,"g":0.7490196078431373,"b":0.5176470588235295,"a":1},"position":0},{"color":{"r":1,"g":0.6627450980392157,"b":0.6235294117647059,"a":1},"position":0.125},{"color":{"r":1,"g":0.5725490196078431,"b":0.6509803921568628,"a":1},"position":0.25},{"color":{"r":0.9607843137254902,"g":0.5803921568627451,"b":0.5372549019607843,"a":1},"position":0.375},{"color":{"r":0.8901960784313725,"g":0.6784313725490196,"b":0.5333333333333333,"a":1},"position":0.5},{"color":{"r":0.796078431372549,"g":0.7529411764705882,"b":0.6470588235294118,"a":1},"position":0.625},{"color":{"r":0.6784313725490196,"g":0.7098039215686275,"b":0.6313725490196078,"a":1},"position":0.75},{"color":{"r":0.5372549019607843,"g":0.6039215686274509,"b":0.5176470588235295,"a":1},"position":0.875},{"color":{"r":0.3764705882352941,"g":0.5607843137254902,"b":0.5568627450980392,"a":1},"position":1}],"transform":{"m00":-565.685425,"m01":-565.685425,"m02":965.685425,"m10":565.685425,"m11":-565.685425,"m12":200.000000},"opacity":1.0,"blendMode":"NORMAL","visible":true}"/>
<defs>
<clipPath id="paint0_angular_clip_path"><rect width="800" height="400"/></clipPath>
</defs>
</svg>
["#ffbf84", "#ffa99f", "#ff92a6", "#f59489", "#e3ad88", "#cbc0a5", "#adb5a1", "#899a84", "#608f8e"]
// https://grabient.com/_fLdgKQgJLhEogBhgBOgBggW7ghGgPggA2gI3?style=angularGradient&steps=9&angle=225
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 9.0;
const float ANGLE = 225.0;
vec3 palette(float t) {
vec3 a = vec3(-3.363, 0.656, 0.587);
vec3 b = vec3(4.392, 0.097, 0.078);
vec3 c = vec3(0.096, 1.467, 2.118);
vec3 d = vec3(0.992, 0.054, 0.567);
return a + b * cos(6.283185 * (c * t + d));
}
// N stops sampled from the palette, blended like the CSS gradient
vec3 stops(float t) {
float n = STEPS - 1.0;
float x = clamp(t, 0.0, 1.0) * n;
return mix(palette(floor(x) / n), palette(min(floor(x) + 1.0, n) / n), fract(x));
}
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);
}
[
[-3.363, 0.656, 0.587],
[4.392, 0.097, 0.078],
[0.096, 1.467, 2.118],
[0.992, 0.054, 0.567]
]