CSS Opacity and Filters

CSS opacity controls the transparency of an entire rendered element; CSS filters modify its visual appearance.

opacity ranges from 0 (transparent) to 1 (opaque) and affects an entire element, including its descendants. CSS filter functions such as grayscale(), blur(), and brightness() alter the rendered pixels.

Opacity is different from a translucent background color: background: rgb(... / 50%) makes only that background translucent, while opacity: .5 also fades child text and images.

Opacity applies to the composited element and its subtree. Filters affect rendered pixels after the element has been drawn.

Text becomes faded along with its parent surface.

HTML

<div class="faded"><strong>Limited offer</strong><p>Text fades too.</p></div>

CSS

.faded { background: #2563eb; color: white; padding: 18px; opacity: 0.5; }
.faded p { margin-bottom: 0; }

Rendered output

Observe: Both the blue surface and white text are rendered at reduced opacity.

Grayscale removes the color from a decorative gradient.

HTML

<div class="filtered">Filtered illustration</div>

CSS

.filtered { padding: 22px; font-weight: 700; background: linear-gradient(90deg, #2563eb, #f59e0b); filter: grayscale(1); }

Rendered output

Observe: The gradient is displayed in shades of gray even though its declared colors are blue and amber.

Opacity applies to the composited element and its subtree. Filters affect rendered pixels after the element has been drawn.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not use low opacity for important readable text because it may harm contrast.
• Using filter: blur() on text may make it inaccessible or difficult to read.

Set opacity to 0.85 and remove the grayscale filter. Explain which pixels change in each example.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use opacity and filters with moderation; accessibility and clarity take priority.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.