Arctic Gradient
CSS
background: linear-gradient(160deg, #f0f9ff 0%, #7dd3fc 100%);Open in Gradient Maker →
Other formats
CSS custom property
--gradient-arctic: linear-gradient(160deg, #f0f9ff 0%, #7dd3fc 100%);
Tailwind arbitrary value
bg-[linear-gradient(160deg,_#f0f9ff_0%,_#7dd3fc_100%)]
Same colours, other shapes
The same stops passed through the other gradient functions — copy whichever suits the surface.
Reversed direction
background: linear-gradient(340deg, #f0f9ff 0%, #7dd3fc 100%);Radial
background: radial-gradient(circle, #f0f9ff 0%, #7dd3fc 100%);Conic
background: conic-gradient(from 160deg, #f0f9ff 0%, #7dd3fc 100%);Text on this gradient
Aa
1.07:1
Aa
11.33:1
Measured against every stop, near-black text holds a worst-case contrast of 11.33:1 on this gradient. Passes WCAG AA for body text (4.5:1).
Color stops
About this gradient
Arctic is a ready-to-use CSS gradient with 2 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