CSS opacity Property

Definition and Usage

The opacity property sets how opaque an element is — the opposite of transparency. A value of 1 is fully solid. A value of 0 is fully invisible. Values in between let content behind the element show through.

It applies to the whole element: background, border, text, and children. For a transparent background only, use a color with an alpha channel instead, such as on background-color.

CSS Syntax

Example: opacity: 0.5; or opacity: 50%;. Out-of-range values are clamped to 0–1.

Property Values

How to Use opacity

Pick a target, set a value between invisible and solid, then animate only if you need a fade.

1. Choose the element that should fade as a whole.
2. Set opacity to a number (0–1) or percentage (0%–100%).
3. For hover fades, add transition: opacity ….
4. If only the background should fade, use an alpha color on background-color instead.

Live Preview

The blue box sits on a checkered stage. Change opacity and watch the pattern show through.

CSS Examples

Each snippet focuses on opacity. Extra styles are kept minimal for study. Use Try It Yourself for a live editor.

<style>
  section {
    background: #e2e8f0;
    padding: 16px;
  }
  div {
    opacity: 0.5;
    background: #2563eb;
    color: #fff;
    padding: 16px;
  }
</style>

<section>
  <div>Half opaque</div>
</section>

<style>
  button {
    opacity: 1;
    transition: opacity 0.3s ease;
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
  }
  button:hover {
    opacity: 0.7;
  }
</style>

<button type="button">Hover me</button>

<style>
  section {
    position: relative;
    background: #93c5fd;
    padding: 24px;
  }
  .overlay {
    position: absolute;
    inset: 0;
    background: #0f172a;
    opacity: 0.6;
  }
  p {
    position: relative;
    color: #fff;
    margin: 0;
  }
</style>

<section>
  <div class="overlay"></div>
  <p>Content over the dim layer</p>
</section>

Key Takeaways