How to layer multiple CSS gradients
Combine flat colour, linear, radial and conic layers in one background while keeping control of transparency and paint order.
Build a layered gradientSeparate each gradient with a comma
The background-image property accepts a list of images. CSS gradients count as generated images, so several can be stacked on the same element.
.layered {
background-image:
radial-gradient(circle at 25% 30%, #ffe45ecc, transparent 55%),
linear-gradient(120deg, #5b5cf0, #d946ef, #ff8a4c);
}Remember that the first layer is on top
CSS paints the first background image closest to the user. Lower layers will only be visible where higher ones are transparent or partially transparent.
Create transparency inside colour stops
Use rgba(), modern colour syntax or the transparent keyword to reveal the lower layers. Transparent stops let a radial highlight fade naturally into a linear base.
Use pseudo-elements for independent movement
When layers need separate animation, blend modes or positioning, move one or more gradients onto ::before or ::after. Keep purely decorative pseudo-elements out of the accessibility tree.