Steel Vortex Gradient: CSS Code & Colors

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

Use background: conic-gradient(from 180deg, #1C1C1C 0%, #607D8B 33%, #CFD8DC 67%, #1C1C1C 100%);. RGBA and HSLA versions are also available on this page.

Steel Vortex Gradient

Conic sweep of charcoal into pale steel grey.

Customize this gradient →

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

Color Stops

#1C1C1C

#607D8B

#CFD8DC

#1C1C1C

Steel Vortex CSS Code

background: #1C1C1C;
background: conic-gradient(from 180deg, #1C1C1C 0%, #607D8B 33%, #CFD8DC 67%, #1C1C1C 100%);

background: rgba(28, 28, 28, 1.0);
background: conic-gradient(from 180deg, rgba(28, 28, 28, 1.0) 0%, rgba(96, 125, 139, 1.0) 33%, rgba(207, 216, 220, 1.0) 67%, rgba(28, 28, 28, 1.0) 100%);

background: hsla(0, 0%, 11%, 1.0);
background: conic-gradient(from 180deg, hsla(0, 0%, 11%, 1.0) 0%, hsla(200, 18%, 46%, 1.0) 33%, hsla(198, 16%, 84%, 1.0) 67%, hsla(0, 0%, 11%, 1.0) 100%);

background: #1C1C1C;
background: conic-gradient(from 180deg, #1C1C1C 0%, #607D8B 33%, #CFD8DC 67%, #1C1C1C 100%);
background: conic-gradient(from 180deg in oklch, oklch(22.64% 0 none) 0%, oklch(57.24% 0.0397 229.02) 33%, oklch(87.65% 0.0112 226) 67%, oklch(22.64% 0 none) 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_180deg,#1C1C1C_0%,#607D8B_33%,#CFD8DC_67%,#1C1C1C_100%)]

bg-[conic-gradient(from_180deg,#1C1C1C_0%,#607D8B_33%,#CFD8DC_67%,#1C1C1C_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Steel Vortex gradient?