Gradient guide
About this layered css gradient generator
Stack multiple CSS gradients
CSS supports multiple background images in one declaration. Each gradient is separated by a comma, with the visually highest background listed first in CSS.
The editor keeps its on-screen layer order and generated markup aligned so the exported composition matches the preview.
Use transparent colour stops
Lower a stop's opacity to reveal layers underneath. A radial gradient that fades to 0% opacity can create a movable pool of light without hiding the base gradient.
Reorder the gradient z-index
Drag any non-base layer to a new position. The base remains fixed at the back, while additional gradients, text and artwork can be arranged above it. The generated code follows that order.
Frequently asked questions
Can CSS use multiple gradients at once?
Yes. Multiple comma-separated gradients can be used as background images on the same element.
Which CSS gradient is on top?
In a comma-separated CSS background list, the first gradient is painted closest to the user, above the gradients that follow.
How many layers can I use here?
Love Gradients supports up to five combined gradient, text and artwork layers.