?️ CSS Opacity

⚡ Quick Overview

The opacity property in CSS controls how transparent an element is. It accepts values between 0 and 1:

0 ➝ completely transparent (invisible)
1 ➝ fully opaque (fully visible)
Values like 0.25, 0.5, 0.8 ➝ different levels of transparency

Opacity affects the entire element — its background, text, borders, and all child elements.

? Key Concepts

Range: Only values between 0 and 1 are valid.
Inherited visually: Children appear transparent if the parent has low opacity.
Layout unaffected: Opacity changes only visibility, not layout or spacing.
Animations: Opacity is commonly used in fade-in / fade-out transitions.
Alternative: Use rgba() colors if you want only the background to be transparent.

? Syntax

Use the opacity property on any element you want to make transparent:

? View Code Example

// Basic opacity syntax (0 = invisible, 1 = fully visible)
selector {
opacity: value;
}

The value is a floating-point number between 0 and 1. For example, 0.3 means “30% visible”.

? Examples

Here are some common opacity values used for different visual effects:

? View Code Example

/* Different opacity values for demo boxes */
.transparent-box {
opacity: 0.25;
}

.semi-transparent {
opacity: 0.6;
}

.fully-visible {
opacity: 1;
}

Sometimes you only want the background to be transparent, not the text. In that case, use rgba() colors instead of opacity:

? View Code Example (Opacity vs RGBA)

/* Using opacity: text and children also become transparent */
.opacity-card {
background-color: #2563eb;
color: #ffffff;
opacity: 0.5;
}

/* Using RGBA: only background is transparent, text stays solid */
.rgba-card {
background-color: rgba(37, 99, 235, 0.5);
color: #ffffff;
}

? Live Output / Visual Demo

? Example: Different Opacity Levels

opacity: 0.25

opacity: 0.6

opacity: 1

All three boxes above have the same background color, but different opacity values. Notice how the first box looks much lighter because it is more transparent.

? Opacity with Hover & Transitions

Opacity is perfect for hover effects such as fading elements in or out smoothly:

? View Code Example (Fade on Hover)

/* Button that fades in when hovered */
.fade-button {
opacity: 0.5;
transition: opacity 0.3s ease;
}

.fade-button:hover {
opacity: 1;
}

? Tips & Best Practices

Use values between 0 and 1 only; other values are invalid.
Remember that opacity affects the entire element and its children.
If you only want the background to be transparent, prefer rgba() instead of opacity.
Combine opacity with transition for smooth fade-in / fade-out effects.
opacity: 0; hides the element visually, but it still takes up space and can still be clickable unless you change pointer events.

? Try It Yourself

Create three <div> elements and set their opacity to 0.2, 0.5, and 0.8. Observe how the transparency changes.
Add a hover effect that changes opacity smoothly using transition.
Recreate one of your examples using rgba() for background instead of opacity and compare the result.

? View Starter Code

/* Practice: play with different opacity values */
.box {
width: 120px;
height: 80px;
margin: 8px;
background-color: #2563eb;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}

.box-low {
opacity: 0.2;
}

.box-medium {
opacity: 0.5;
}

.box-high {
opacity: 0.8;
}