CSS gradient · linear · 135°
Rose Gold Gradient
Rose Gold 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.
linear · 135°
#F43B47 · 0%#453A94 · 100%
CSS
background: linear-gradient(135deg, #f43b47 0%, #453a94 100%);Other formats
--gradient-rose-gold: linear-gradient(135deg, #f43b47 0%, #453a94 100%);bg-[linear-gradient(135deg,_#f43b47_0%,_#453a94_100%)]Same colours, other shapes
The same stops passed through the other gradient functions — copy whichever suits the surface.
background: linear-gradient(315deg, #f43b47 0%, #453a94 100%);background: radial-gradient(circle, #f43b47 0%, #453a94 100%);background: conic-gradient(from 135deg, #f43b47 0%, #453a94 100%);Text on this gradient
White · 3.77:1 · worst case
Near-black · 2.06:1 · worst case
White · LargeNear-black · Below AA
Measured against every stop, white text holds a worst-case contrast of 3.77:1 on this gradient. Passes WCAG AA for large text only (3:1) — use it at 24px or above, or 18.7px bold.
Color stops
About this gradient
Rose Gold 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.