free tools runs in this tab no account, no upload
CSS gradient builder
What is the CSS for a gradient between these two colours?
Two stops and an angle, written as a declaration you can paste. The midpoint is printed as a hex because that is the colour text sitting over the middle of the band is really against.
background: linear-gradient(135deg, #0d7490 0%, #c026d3 100%);
- midpoint colour #674db2
- radial instead radial-gradient(circle, #0d7490, #c026d3)
how to use it
- Give the two stop colours and the angle in degrees.
- Copy the linear-gradient() declaration.
- Check the midpoint hex if anything is going to be set over the band.
what this page cannot do
The extension reads the gradients a page already declares, including the ones written into a background shorthand three stylesheets deep, and tells you which element is painting the band under your text.
Tokens in the panel What design tokens is this page actually painting with?
no host permissions · the reading is free