Skip to main content

​
Overview

The bundle ships every 5% step from opacity-0 through opacity-100 for overlays, disabled states, and layered interfaces.
ClassValueCSS
.opacity-00%opacity: 0;
.opacity-55%opacity: 0.05;
.opacity-1010%opacity: 0.1;
.opacity-1515%opacity: 0.15;
.opacity-2020%opacity: 0.2;
.opacity-2525%opacity: 0.25;
.opacity-3030%opacity: 0.3;
.opacity-3535%opacity: 0.35;
.opacity-4040%opacity: 0.4;
.opacity-4545%opacity: 0.45;
.opacity-5050%opacity: 0.5;
.opacity-5555%opacity: 0.55;
.opacity-6060%opacity: 0.6;
.opacity-6565%opacity: 0.65;
.opacity-7070%opacity: 0.7;
.opacity-7575%opacity: 0.75;
.opacity-8080%opacity: 0.8;
.opacity-8585%opacity: 0.85;
.opacity-9090%opacity: 0.9;
.opacity-9595%opacity: 0.95;
.opacity-100100%opacity: 1;

​
Example

​
Examples

​
Overlay

<div class="elementor-element relative">
  <img alt="Background image" class="w-full object-cover rounded-lg" src="image.jpg" style="height: 16rem;"/>
  <div class="absolute bg-black opacity-50 rounded-lg" style="top: 0; right: 0; bottom: 0; left: 0;">
  </div>
  <div class="absolute flex items-center justify-center" style="top: 0; right: 0; bottom: 0; left: 0;">
    <h2 class="text-white text-2xl font-bold">
      Overlay Text
    </h2>
  </div>
</div>

​
Disabled Surface

<button class="btn btn-blue opacity-50">
  Disabled Button
</button>
<div class="elementor-element opacity-50">
  <input class="w-full p-3 border-1 border-solid border-gray rounded" disabled="" type="text"/>
</div>

​
Loading State

<div class="elementor-element relative">
  <div class="p-6 bg-white rounded-lg">
    <h3 class="text-xl font-semibold mb-4">
      Content
    </h3>
    <p class="text-gray">
      This content is loading...
    </p>
  </div>
  <div class="absolute bg-white opacity-75 flex items-center justify-center rounded-lg" style="top: 0; right: 0; bottom: 0; left: 0;">
    <p class="text-sm text-gray">
      Loading...
    </p>
  </div>
</div>

​
Text, Background, and Border Opacity

<h1 class="text-4xl font-bold text-black opacity-100">
  Primary Heading
</h1>
<h2 class="text-2xl font-semibold text-gray opacity-75">
  Secondary Heading
</h2>
<p class="text-base text-gray opacity-50">
  Muted paragraph text
</p>

<div class="elementor-element bg-primary opacity-100 p-6 text-white">
  Full opacity background
</div>
<div class="elementor-element bg-primary opacity-75 p-6 text-white">
  75% opacity background
</div>
<div class="elementor-element bg-primary opacity-50 p-6 text-white">
  50% opacity background
</div>

<div class="elementor-element border-2 border-solid border-primary opacity-100 p-4 rounded">
  Full opacity border
</div>
<div class="elementor-element border-2 border-solid border-primary opacity-75 p-4 rounded">
  75% opacity border
</div>
<div class="elementor-element border-2 border-solid border-primary opacity-50 p-4 rounded">
  50% opacity border
</div>

​
Best Practices

Ensure text remains readable when opacity reduces contrast. Decorative overlays can go low; body text usually should not.
1

Use Lower Values for Overlays

opacity-10 through opacity-50 work well for dimming media or stacking panels.
2

Use Higher Values for State Changes

opacity-60 through opacity-95 can suggest disabled or loading states while keeping content visible.
3

Avoid Overusing Transparency

Too many translucent layers can make interfaces feel muddy and hard to read.
4

Pair With Positioning

Overlays usually combine opacity with .relative, .absolute, or .fixed.

Effects Overview

Overview of the currently shipped effects surface

Colors

Color utilities that work with opacity

Layout

Positioning utilities for overlay effects

Z-Index

Layer opacity effects with predictable stacking