CSS Tutorial
CSS Opacity
opacity fades a whole box including children. For color only, use an alpha channel.
What opacity does
opacity sets how solid a box looks. 1 is fully painted. 0 is fully see-through. Values in between, such as 0.4 or 0.85, mix the box with whatever sits behind it.
The property belongs to the whole element. Text, borders, images, and nested cards all fade together. That is useful for a watermark or a disabled control. It is the wrong tool when you only want a pale teal panel with dark, readable type.
A scale from 0 to 1
Write a number, not a percentage. opacity: 50% is valid in modern browsers, but tutorials and older sheets still use 0.5. Stick to the 0–1 form until you have a reason to switch.
| Value | Look |
|---|---|
1 | Default. The box is fully opaque |
0.75 | A light fade, still easy to read |
0.4 | Clearly translucent; type starts to wash out |
0 | Invisible. The box still takes space and can receive clicks |
Click Try it in CSS under an example. That opens /css/try — a live page preview with a stylesheet pane.
Fade a whole card
Harbor studio hangs a second notice over the tide print. Both cards share the same type size. The rear card is faded so the front one reads as current.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.card {
background: #fff;
border: 1px solid #7dd3fc;
border-radius: 0.85rem;
padding: 1rem 1.1rem;
max-width: 22rem;
}
.past {
opacity: 0.4;
margin-bottom: 0.75rem;
}
.now {
border-color: #0d9488;
}
</style>
<h1>Harbor studio</h1>
<article class="card past">
<h2>March print</h2>
<p>Sold out. Kept on the wall as a sample.</p>
</article>
<article class="card now">
<h2>April tide chart</h2>
<p>Open 8–16. Ask at the desk.</p>
</article>Change 0.4 to 0.15 and the March print almost disappears. The layout does not jump: faded boxes still occupy their height.
Children fade with the parent
You cannot “un-fade” a child. If the parent is opacity: 0.3, every nested heading and button is at most 30% solid, even if you set the child to opacity: 1.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #e0f2fe;
color: #0c4a6e;
}
.panel {
background: #0d9488;
color: #fff;
padding: 1.1rem 1.2rem;
border-radius: 0.85rem;
opacity: 0.35;
}
.panel strong {
opacity: 1;
}
</style>
<p>Wall behind the panel stays visible.</p>
<div class="panel">
<p>Harbor Lane 12</p>
<p><strong>This label is still faded</strong> — the parent owns opacity.</p>
</div>A box with opacity: 0 is hidden from sight but not from the page. Screen readers may still announce it. Keyboard users can still tab to links inside it. Prefer visibility: hidden or remove the markup when the content should not be used.
Alpha on a color only
When you want a washed background and solid text, leave opacity at 1. Put the transparency in the color: rgba(), hsla(), or an eight-digit hex such as #0d948866.
Example
<style>
body {
font-family: Georgia, serif;
margin: 1.25rem;
background: #f0f9ff;
color: #0c4a6e;
}
.alpha {
background: rgba(13, 148, 136, 0.18);
color: #0c4a6e;
padding: 1rem 1.1rem;
border-radius: 0.85rem;
margin-bottom: 0.75rem;
}
.whole {
background: #0d9488;
color: #fff;
padding: 1rem 1.1rem;
border-radius: 0.85rem;
opacity: 0.18;
}
</style>
<h1>Harbor studio</h1>
<p class="alpha">Alpha on the fill. The hours stay dark and readable.</p>
<p class="whole">opacity on the box. The hours fade with the fill.</p>Same number, two jobs. 0.18 on the teal fill tints the paper. 0.18 onopacity tints the letters too. Pick the property that matches what you want to see through.
What to do next
Hover and focus are the usual places opacity shows up: a quiet button, then a solid one on:hover. That is a pseudo-class — the next chapter — not a second copy of the markup.
| Need | Use |
|---|---|
| Fade a photo, overlay, or whole card | opacity |
| Pale fill, strong text | rgba() / hex with alpha |
| Hide from layout | display: none, not opacity 0 |
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Chemistry
A faded empty bottle
opacity fades the whole box including children and text. 0.4 on a sold-out reagent still occupies space. display:none would remove it.
For a wash behind solid text, use rgba on the background instead. Opacity on the parent would fade the words too.
Example
<style>
.empty { opacity: 0.4; }
</style>
<p>HCl — in stock</p>
<p class="empty">Old indicator — discard</p>Astronomy
A sky wash, text solid
rgba(8, 47, 73, 0.25) tints the panel. The paragraph colour stays 100% opaque. That is the difference from opacity: 0.25 on the whole div.
Example
<style>
.wash { background: rgba(8, 47, 73, 0.25); padding: 0.7rem; color: #082f49; }
</style>
<p class="wash">Mars · 687 Earth days</p>