CSS Gradient with Transparency: Fade to Transparent Effects
Create CSS gradients that fade to transparent. Learn to use rgba, hsla, and the transparent keyword to overlay gradients on images.
Published:
Tags: css, design, developer-tools
CSS Gradients With Transparency: Fade to Transparent Fading to transparent is one of the most common gradient patterns in web design — hero image overlays, text scrims, edge fades for carousels, iOS-style toolbar blurs. Done well, it looks invisible (in the good way). Done poorly, it produces an unexpected gray band at the midpoint. Understanding why that happens, and how to fix it, is essential knowledge. The Basic Pattern The "Eerie Gray" Problem A gradient from a vivid color to in sRGB (the default interpolation space) produces a gray or washed-out band in the middle. This is a known quirk: Why it happens: in CSS is equivalent to — black with zero opacity. When interpolating from a vivid blue to in sRGB, the midpoint is something like — a semi-transparent dark color, which on a white…
All articles · theproductguy.in