opacity
The transparency of the whole element together with its content.
Syntax
opacity: 0…1;Values
| Parameter | Type | Description |
|---|---|---|
| number | 0–1 | From 0 (invisible) to 1 (opaque). |
| % | percentage | The same in percent: `50%`. |
Examples
Different transparency:
<style>
img { width: 100px; }
</style>
<img src="/media/photo-200x200.jpg" alt="" style="opacity: 1;">
<img src="/media/photo-200x200.jpg" alt="" style="opacity: 0.5;">
<img src="/media/photo-200x200.jpg" alt="" style="opacity: 0.2;">Fading in on hover:
<style>
.fade { opacity: 0.4; transition: opacity 0.3s; }
.fade:hover { opacity: 1; }
</style>
<button class="fade">Hover to show fully</button>Notes
opacity affects children too, and they cannot be made more opaque than the parent. For a see-through background with solid text, use a semi-transparent color: background: rgb(0 0 0 / 0.5). An element with opacity: 0 is invisible but still clickable.
See also
- visibility — Hides an element but keeps the space it occupies.
- transition — Animates the change of a property from the old value to the new one.
- color — The color of the text (and the default color of borders and SVG icons).
Related recipes
In the tutorial
- Colors — Text and background color, ways to write a color in CSS — names, hex, rgb() and hsl() — and transparency.