What is CSS Opacity?

The opacity property controls how transparent an element is. It accepts values from 0 (completely invisible) to 1 (fully visible). When you change an element's opacity, it affects the entire element including all its children, text, borders, and backgrounds.

CSS

.box { opacity: 1; }     /* Fully visible (default) */
.box { opacity: 0.5; }   /* 50% transparent */
.box { opacity: 0; }     /* Completely invisible */

The opacity Property

CSS

.overlay {
  opacity: 0.7; /* 70% visible, 30% transparent */
}

.ghost-text {
  opacity: 0.3;
}

.disabled-section {
  opacity: 0.5;
  pointer-events: none;
}

Important: Opacity Affects Everything

When you apply opacity to a parent, all children become transparent too:

CSS

.card {
  opacity: 0.5;
  /* Background, text, images, borders — ALL become 50% transparent */
}

You cannot make child elements more opaque than their parent once opacity is set.

opacity vs RGBA/HSLA

If you only want a transparent background (not transparent text), use RGBA or HSLA colors instead of opacity:

CSS

/* BAD: Makes everything transparent including text */
.overlay {
  background: black;
  color: white;
  opacity: 0.7;
}

/* GOOD: Only background is transparent, text stays fully visible */
.overlay {
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

Comparison

CSS

/* Using opacity: text AND background become transparent */
.method-1 {
  background: #3498db;
  color: white;
  opacity: 0.5;
}

/* Using RGBA: ONLY background is transparent */
.method-2 {
  background: rgba(52, 152, 219, 0.5);
  color: white;
}

/* Using HSLA: ONLY background is transparent */
.method-3 {
  background: hsla(204, 70%, 53%, 0.5);
  color: white;
}

The transparent Keyword

CSS has a built-in transparent keyword equivalent to rgba(0, 0, 0, 0):

CSS

.invisible-border {
  border: 2px solid transparent;
}

.no-bg {
  background: transparent;
}

This is useful for maintaining an element's size while hiding its visual border or background.

Common transparent Patterns

CSS

/* Border that appears on hover */
.card {
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: #3498db;
}

/* Gradient that fades to nothing */
.fade-out {
  background: linear-gradient(to bottom, #333, transparent);
}

Opacity for Hover Effects

CSS

/* Fade effect on hover */
.image-card img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.image-card:hover img {
  opacity: 0.7;
}

/* Button opacity feedback */
.btn:hover {
  opacity: 0.9;
}

.btn:active {
  opacity: 0.7;
}

Opacity for Disabled States

CSS

.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.form-input:disabled {
  opacity: 0.6;
  background: #f5f5f5;
}

Fade-In and Fade-Out Animations

Opacity combined with transitions creates smooth fade effects:

CSS

/* Fade in */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
}

/* Fade in on scroll (with JavaScript adding the class) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

Opacity Creates a Stacking Context

Setting opacity to any value less than 1 creates a new stacking context. This can affect z-index behavior:

CSS

.parent {
  opacity: 0.99; /* Creates stacking context */
}

.child {
  z-index: 9999; /* Only stacks within parent's context */
}

This is an important gotcha when debugging z-index issues.

Layered Transparent Backgrounds

Build depth with multiple transparent layers:

CSS

/* Semi-transparent overlay on an image */
.hero {
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hero-content {
  position: relative;
  z-index: 1;
  color: white;
}

Gradient Overlays

CSS

.card-image {
  background:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8)),
    url('photo.jpg') center/cover;
}

Summary

CSS offers multiple ways to control transparency. The opacity property makes entire elements (including children) transparent, while RGBA and HSLA colors let you make only specific properties transparent. Use the transparent keyword for invisible borders and backgrounds. Opacity is essential for hover effects, disabled states, fade animations, and layered visual designs. Remember that opacity below 1 creates a new stacking context that affects z-index behavior.