CSS Tutorial
CSS Opacity
The CSS opacity property controls how transparent an element is, letting you fade images, create overlays, and build hover effects. This guide explains opacity values, the difference between opacity and rgba() alpha, and how transparency cascades to child elements.
What is CSS Opacity?
Opacity describes how see-through an element is. The opacity property accepts a number from 0.0 (completely transparent, invisible) to 1.0 (completely solid, the default). A value of 0.5 makes the element half transparent so whatever sits behind it shows through.
img {
opacity: 0.5; /* 50% transparent */
}Opacity Values
| Value | Meaning |
|---|---|
| opacity: 1 | Fully opaque (default) - no transparency |
| opacity: 0.75 | 25% transparent |
| opacity: 0.5 | Half transparent |
| opacity: 0.25 | Mostly transparent |
| opacity: 0 | Fully transparent - invisible but still occupies space |
Live Example: Opacity Levels
Each box below uses a different opacity value. Notice how lower values let the striped page background show through and also fade the text inside.
<!DOCTYPE html>
<html>
<head>
<style>
body { background: repeating-linear-gradient(45deg, #e0f2fe, #e0f2fe 12px, #bae6fd 12px, #bae6fd 24px); font-family: system-ui, sans-serif; }
.box { background: #0f766e; color: #fff; padding: 20px; margin: 10px; text-align: center; font-weight: bold; }
.o10 { opacity: 1; }
.o07 { opacity: 0.7; }
.o04 { opacity: 0.4; }
.o01 { opacity: 0.1; }
</style>
</head>
<body>
<div class="box o10">opacity: 1</div>
<div class="box o07">opacity: 0.7</div>
<div class="box o04">opacity: 0.4</div>
<div class="box o01">opacity: 0.1</div>
</body>
</html>Opacity Affects Child Elements
A key gotcha: opacity applies to the whole element including every child. If you fade a card, the text inside fades too and you cannot make it solid again from within. When you only want the background transparent while keeping text crisp, use an rgba() or hsla() color instead.
Setting opacity below 1 creates a new stacking context and cannot be overridden by children. To keep foreground text fully solid, apply transparency to the background color only.
Transparency with RGBA and HSLA
The rgba() and hsla() color functions add an alpha channel as a fourth value (0 to 1). This makes a single color transparent without affecting the element's contents, which is ideal for overlays and glass-like panels.
<!DOCTYPE html>
<html>
<head>
<style>
body { background: repeating-linear-gradient(45deg, #fde68a, #fde68a 12px, #fca5a5 12px, #fca5a5 24px); font-family: system-ui, sans-serif; padding: 20px; }
.panel { background: rgba(15, 118, 110, 0.35); color: #063; padding: 24px; border-radius: 12px; }
.panel h3 { margin: 0 0 6px; }
</style>
</head>
<body>
<div class="panel">
<h3>Frosted Panel</h3>
<p>The background is 35% opaque but this text stays fully solid.</p>
</div>
</body>
</html>Opacity on Hover
Combining opacity with the :hover selector and a transition creates a smooth fade effect, commonly used on image thumbnails and buttons.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; }
.thumb { display: inline-block; background: #7c3aed; color: #fff; padding: 40px; border-radius: 10px; opacity: 0.6; transition: opacity 0.3s; }
.thumb:hover { opacity: 1; }
</style>
</head>
<body>
<div class="thumb">Hover to brighten me</div>
</body>
</html>Animate opacity and transform instead of properties like width or top. The browser can render opacity changes on the GPU, so fades stay smooth and do not trigger expensive layout recalculations.
Key points
- opacity ranges from 0 (invisible) to 1 (solid) and defaults to 1.
- An element with opacity: 0 is invisible but still takes up space and can be clicked.
- opacity fades the element and all its children together.
- Use rgba() or hsla() alpha to make only a background or color transparent.
- Pair opacity with transition for smooth hover fades.