CSS Opacity

CSS opacity Property – Control Element Transparency in CSS

The opacity property in CSS is used to control the transparency level of an element. It specifies the transparency of an element, ranging from fully transparent (0) to fully opaque (1).

Syntax

selector {
  opacity: value;
}
  • value: A number between 0 (completely transparent) and 1 (completely opaque). Decimal values like 0.5 make the element semi-transparent.

Examples

1. Basic Opacity

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 10px;
    }

    .opaque {
      opacity: 1; /* Fully opaque */
    }

    .semi-transparent {
      opacity: 0.5; /* 50% transparent */
    }

    .transparent {
      opacity: 0; /* Fully transparent */
    }
  </style>
</head>
<body>
  <div class="box opaque">Opaque</div>
  <div class="box semi-transparent">Semi-Transparent</div>
  <div class="box transparent">Transparent</div>
</body>
</html>

Try It Now

Hover Effect with Opacity

You can use opacity to create hover effects.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .hover-box {
      width: 150px;
      height: 150px;
      background-color: green;
      opacity: 0.7;
      transition: opacity 0.3s ease; /* Smooth transition */
    }

    .hover-box:hover {
      opacity: 1; /* Fully opaque on hover */
    }
  </style>
</head>
<body>
  <div class="hover-box"></div>
</body>
</html>

Try It Now

Using opacity with Images

Opacity is often used with images to create fading effects.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .image {
      width: 200px;
      height: auto;
      opacity: 0.8;
      transition: opacity 0.5s ease;
    }

    .image:hover {
      opacity: 1; /* Fully visible on hover */
    }
  </style>
</head>
<body>
  <img src="https://via.placeholder.com/200" alt="Placeholder" class="image">
</body>
</html>

Try It Now

Combining opacity with Background Colors

When using opacity on an element, all child elements inherit the transparency. To avoid this, use rgba() or hsla() for background colors instead.

Opacity Affects Children

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: red;
      opacity: 0.5; /* Affects child elements */
    }

    .child {
      color: white;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">Child text is also semi-transparent</p>
  </div>
</body>
</html>

Try It Now

Using rgba() Instead

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .parent {
      width: 200px;
      height: 100px;
      background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent background */
    }

    .child {
      color: white; /* Child elements are unaffected */
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">Child text is not affected</p>
  </div>
</body>
</html>

Try It Now

Opacity in Animations

You can animate the opacity property for fading effects.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .fade-box {
      width: 100px;
      height: 100px;
      background-color: purple;
      opacity: 0;
      animation: fadeIn 2s forwards;
    }

    @keyframes fadeIn {
      to {
        opacity: 1; /* Fade in to fully visible */
      }
    }
  </style>
</head>
<body>
  <div class="fade-box"></div>
</body>
</html>

Try It Now

Key Points

  1. Value Range:
    • 0: Fully transparent.
    • 1: Fully opaque.
    • Decimal values (e.g., 0.5) make the element semi-transparent.
  2. Inheritance:
    • opacity affects both the element and its children. Use rgba() or hsla() for background transparency to avoid this.
  3. Performance:
    • opacity changes are GPU-accelerated, making them efficient for animations.
  4. Transition and Animation:
    • Use transition or @keyframes for smooth fade effects.

Experiment with the examples above to understand how opacity works and how it can enhance your designs!