CSS gradient guide
CSS gradient transparency and opacity
Use alpha values inside individual colour stops to create fades without making the whole element transparent.
Design with transparent layersUse alpha values in colour stops
An alpha value controls the transparency of one colour stop. This lets a gradient fade from visible colour to a transparent version of that colour while leaving the element's contents unaffected.
background: linear-gradient(90deg, rgba(91, 92, 240, 1), rgba(91, 92, 240, 0));Do not confuse stop alpha with element opacity
opacity applies to the entire element, including text and children. Transparent gradient colours only affect the generated background image, which is normally the safer option for overlays.
Avoid unexpected colour shifts
For a clean fade, make the transparent endpoint use the same underlying RGB colour with an alpha of zero. Fading toward a generic transparent black can create a dull middle on some colour combinations.