On this page

CSS Opacity & Blend Modes

Badar KhalilUpdated September 29, 2026 5 min read

What Are CSS Opacity and Blend Modes?

The CSS opacity property controls how transparent an element is, while blend modes control how an element's colors mix with whatever is behind it. Together they make overlays, fades, duotone images, text knockouts and Photoshop-like effects possible in pure CSS. Our focus keyword is CSS opacity, and you will also learn trending topics: opacity vs rgba, mix-blend-mode examples, background-blend-mode duotone, CSS isolation property, fade in and out transitions, and how opacity creates a stacking context.

1. The opacity Property

opacity accepts a number from 0 (fully transparent) to 1 (fully opaque), or a percentage such as 50%. It applies to the whole element, including its text, borders, background and all children.

Code

.faded { opacity: 0.5; }

2. opacity vs Color Alpha (rgba, hsl / alpha)

	opacity	Color with alpha
Affects	The entire element and all children	Only that one color (background, border, text...)
Children	Cannot be made more opaque than the parent	Children stay fully opaque
Example	`opacity: .6`	`background: rgb(0 0 0 / 60%)`

To make a semi-transparent background with fully readable text, use color alpha, not opacity.

3. opacity Side Effects

Any opacity value less than 1 creates a new stacking context. This can change how z-index works for the element's children.
An element with opacity: 0 is invisible but still takes space, still receives clicks and can still be focused by keyboard. Add visibility: hidden or pointer-events: none when hiding interactive content.
Screen readers still read content with opacity: 0. Use display: none or hidden to remove it from the accessibility tree.

4. Fade Transitions

opacity is one of the best properties to animate because browsers can animate it on the GPU without triggering layout. Combine transition: opacity .3s with :hover for fades. For fade-outs that also remove the element, combine opacity with visibility or use the modern transition-behavior: allow-discrete together with @starting-style.

5. mix-blend-mode

mix-blend-mode blends an element with the content behind it (its parent's background and earlier siblings). The syntax is simply mix-blend-mode: multiply;.

Mode	Effect	Typical use
`normal`	Default, no blending	Everyday elements
`multiply`	Darkens; white becomes transparent	Shadows, logos on colored backgrounds, duotone
`screen`	Lightens; black becomes transparent	Glows, light leaks
`overlay`	Boosts contrast, mixes multiply and screen	Textures, color grading
`darken` / `lighten`	Keeps the darkest or lightest channel	Layering shapes
`color-dodge` / `color-burn`	Strong brighten or darken effects	Highlights, dramatic looks
`difference`	Subtracts colors; creates inverted looks	Text that stays visible on any background
`hue`, `saturation`, `color`, `luminosity`	Applies a single HSL component	Recoloring images

6. background-blend-mode

Blends the background layers of one element with each other and with its background color. It does not affect children or content. It is perfect for duotone images: set a background-color, add an image, and use background-blend-mode: multiply.

7. The isolation Property

Blend modes look at everything behind an element up to the nearest stacking context. Set isolation: isolate on a parent to create a new stacking context so its children blend only with each other, and not with the page behind. This avoids surprising results and unexpected color shifts.

8. Creative Techniques

Text knockout: big text with mix-blend-mode: screen or multiply over an image.
Auto-contrast text: white text with mix-blend-mode: difference stays readable over both light and dark areas.
Duotone photo: grayscale image plus a colored layer with mix-blend-mode: multiply or lighten.
Logo on any color: a logo with white background using mix-blend-mode: multiply looks transparent.

9. Performance and Accessibility

Blend modes on large or many elements can be expensive because the browser must composite several layers. Test on mid-range phones.
Blended colors change with the background, so verify text contrast in every case. Avoid blending for critical body text.
Provide a fallback: unsupported browsers just show normal blending. All current browsers support the standard blend modes.

Best Practices

Use color alpha for translucent backgrounds and opacity for fading whole components.
Use isolation: isolate on components that use blend modes.
Hide content properly (hidden, display: none) when it should not be reachable.
Animate opacity and transform rather than layout properties.

Common Mistakes

Using opacity on a container and making its text faded too.
Leaving an opacity: 0 button clickable and focusable.
Forgetting that opacity below 1 creates a stacking context and breaks expected z-index layering.
Confusing mix-blend-mode (blends the element with what is behind) with background-blend-mode (blends only background layers).

Summary

Opacity fades whole elements, alpha colors fade individual paints, and blend modes mix layers like design software. Know the stacking-context effect, use isolation, and test contrast for effects that change with the background. Try the live examples below.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .row { display: flex; gap: 10px; flex-wrap: wrap; }
  .o { width: 100px; height: 80px; background: #2563eb; color: #fff; padding: 6px; font-size: 12px; }
</style>
<div class='row'>
  <div class='o' style='opacity: 1'>opacity 1</div>
  <div class='o' style='opacity: .7'>opacity .7</div>
  <div class='o' style='opacity: .4'>opacity .4</div>
  <div class='o' style='opacity: .1'>opacity .1</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; padding: 16px; background: linear-gradient(135deg, #f59e0b, #ec4899); }
  .box { display: inline-block; width: 200px; padding: 18px; margin: 8px; color: #fff; font-weight: bold; border-radius: 10px; }
  .op { background: #000; opacity: .5; }
  .alpha { background: rgb(0 0 0 / 50%); }
</style>
<div class='box op'>opacity: .5 (text is faded too)</div>
<div class='box alpha'>rgb alpha 50% (text stays sharp)</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .card { position: relative; width: 240px; height: 150px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #38bdf8, #6366f1); }
  .card .info { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(15 23 42 / 80%); color: #fff; opacity: 0; transition: opacity .35s; }
  .card:hover .info { opacity: 1; }
</style>
<div class='card'><div class='info'>Fade in on hover</div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .stage { isolation: isolate; width: 320px; height: 170px; position: relative; background: #fde047; border-radius: 12px; overflow: hidden; }
  .c { position: absolute; width: 120px; height: 120px; border-radius: 50%; }
  .c1 { background: #ef4444; left: 30px; top: 25px; mix-blend-mode: multiply; }
  .c2 { background: #3b82f6; left: 90px; top: 25px; mix-blend-mode: multiply; }
  .c3 { background: #22c55e; left: 150px; top: 25px; mix-blend-mode: multiply; }
</style>
<div class='stage'><div class='c c1'></div><div class='c c2'></div><div class='c c3'></div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .duo { height: 170px; max-width: 360px; border-radius: 12px; background-color: #7c3aed; background-image: linear-gradient(135deg, #fef08a, #16a34a 45%, #0f172a); background-blend-mode: multiply; margin-bottom: 14px; }
  .diff { height: 120px; max-width: 360px; border-radius: 12px; background: linear-gradient(90deg, #fff 50%, #111 50%); display: grid; place-items: center; }
  .diff h2 { margin: 0; font: 800 34px sans-serif; color: #fff; mix-blend-mode: difference; }
</style>
<div class='duo'></div>
<div class='diff'><h2>Always Readable</h2></div>

Output

Press Run to execute.

Exercise: Semi-transparent Banner With Sharp TextHTML

The banner text becomes faded because opacity is used. Fix the CSS so the black background is 60% transparent but the white text stays fully sharp. Remove the opacity declaration.

Try it Yourself HTML

<style>
  body { background: linear-gradient(135deg, #f97316, #db2777); padding: 30px; font-family: sans-serif; }
  .banner { background: #000; opacity: 0.6; color: #fff; padding: 20px; border-radius: 8px; }
</style>
<div class='banner'>Sharp white text on a translucent black banner</div>

Output

Press Run to execute.

Show expected output

Translucent black banner with fully opaque white text.

This is a self-check — compare your result with the expected output above.

Exercise: Duotone Effect With Blend ModesHTML

Create a duotone look on .photo by combining a background-color (#0ea5e9) with the existing gradient image layer using background-blend-mode: multiply.

Try it Yourself HTML

<style>
  .photo { width: 320px; height: 180px; border-radius: 12px; background-image: linear-gradient(45deg, #fff, #94a3b8 50%, #0f172a); /* your code */ }
</style>
<div class='photo'></div>

Output

Press Run to execute.

Show expected output

The gradient is tinted with a blue color through multiply blending.

This is a self-check — compare your result with the expected output above.

Quiz: Opacity & Blend Modes Quiz Pass 70%

Loading quiz…

Was this page helpful?