Cosmic Gradient
CSS
background: radial-gradient(circle, #1a1a2e 0%, #16213e 50%, #0f3460 100%);Open in Gradient Maker →
Other formats
CSS custom property
--gradient-cosmic: radial-gradient(circle, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
Tailwind arbitrary value
bg-[radial-gradient(circle,_#1a1a2e_0%,_#16213e_50%,_#0f3460_100%)]
Same colours, other shapes
The same stops passed through the other gradient functions — copy whichever suits the surface.
Linear
background: linear-gradient(0deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);Conic
background: conic-gradient(from 0deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);Text on this gradient
Aa
12.50:1
Aa
1.11:1
Measured against every stop, white text holds a worst-case contrast of 12.50:1 on this gradient. Passes WCAG AA for body text (4.5:1).
Color stops
About this gradient
Cosmic is a ready-to-use CSS gradient with 3 color stops. Copy the CSS below, open it in the Gradient Maker to tweak the angle and stops, or click any stop color for its full breakdown.
More gradients