Desert Vortex Gradient: CSS Code & Colors

Q: What's the CSS code for the Desert Vortex gradient?

Use background: conic-gradient(from 270deg, #FFF3E0 0%, #E6A756 33%, #8B4513 67%, #FFF3E0 100%);. RGBA and HSLA versions are also available on this page.

Desert Vortex Gradient

Conic sweep of sandy cream into deep terracotta.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#FFF3E0

#E6A756

#8B4513

#FFF3E0

Desert Vortex CSS Code

background: #FFF3E0;
background: conic-gradient(from 270deg, #FFF3E0 0%, #E6A756 33%, #8B4513 67%, #FFF3E0 100%);

background: rgba(255, 243, 224, 1.0);
background: conic-gradient(from 270deg, rgba(255, 243, 224, 1.0) 0%, rgba(230, 167, 86, 1.0) 33%, rgba(139, 69, 19, 1.0) 67%, rgba(255, 243, 224, 1.0) 100%);

background: hsla(37, 100%, 94%, 1.0);
background: conic-gradient(from 270deg, hsla(37, 100%, 94%, 1.0) 0%, hsla(34, 74%, 62%, 1.0) 33%, hsla(25, 76%, 31%, 1.0) 67%, hsla(37, 100%, 94%, 1.0) 100%);

background: #FFF3E0;
background: conic-gradient(from 270deg, #FFF3E0 0%, #E6A756 33%, #8B4513 67%, #FFF3E0 100%);
background: conic-gradient(from 270deg in oklch, oklch(96.85% 0.0282 79.48) 0%, oklch(77.26% 0.1227 71.07) 33%, oklch(47.08% 0.1121 50.85) 67%, oklch(96.85% 0.0282 79.48) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-[conic-gradient(from_270deg,#FFF3E0_0%,#E6A756_33%,#8B4513_67%,#FFF3E0_100%)]

bg-[conic-gradient(from_270deg,#FFF3E0_0%,#E6A756_33%,#8B4513_67%,#FFF3E0_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Desert Vortex gradient?