Skip to main content
AtomicKit ships a complete opacity scale that lets you dial the transparency of any Elementor element from fully invisible to fully opaque. Whether you’re building a dark overlay behind a modal, dimming a disabled button, or creating a layered media composition, you have a precise value for every use case without reaching for custom CSS.

​
Full Opacity Scale

AtomicKit ships every 5% step from opacity-0 through opacity-100 — 21 values in total. All classes map directly to the CSS opacity property.
ClassOpacity ValueCSS Property
.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

​
Code Examples

Overlay on an image — darken a background behind text or UI: 
<div class="relative">
  <!-- Background image container -->
  <div class="absolute opacity-50 background-black">
    <!-- Semi-transparent black layer over the image -->
  </div>
  <div class="relative">
    <!-- Content sits above the overlay -->
  </div>
</div>
Disabled button state — visually mute an inactive control: 
<div class="opacity-60">
  <!-- Button or form control in a disabled or loading state -->
</div>
Subtle hover tint — light background wash over a card: 
<div class="opacity-10 background-primary">
  <!-- Very light primary color fill for hover or selected states -->
</div>

​
Best Practices

1

Use low opacity for overlays and media dimming

Values in the opacity-10 to opacity-50 range work well for color washes, image overlays, and decorative background layers. They let the content underneath show through while shifting the visual tone.
2

Use mid opacity for disabled and loading states

Values in the opacity-60 to opacity-75 range clearly communicate that a component is temporarily inactive. The element remains visible and understandable, just visually de-emphasized.
3

Scope opacity to the right layer

Apply opacity to a wrapper or background layer rather than the entire component when you only want to dim the background. This keeps text and interactive elements at full contrast while the decorative layer fades.
4

Avoid overusing transparency

Too many transparent layers stacked on top of one another can produce muddy, hard-to-read interfaces. If you find yourself using opacity to compensate for a color that’s too strong, adjust the color token instead.

​
Accessibility

Do not apply opacity values below opacity-75 to elements that contain body text, labels, or interactive controls. Reduced opacity lowers the effective contrast ratio between text and its background, which can fail WCAG contrast requirements and make content unreadable for users with low vision. Use opacity on decorative, background, or media layers only.

​
Related Utilities

  • Box Shadow — Add elevation and depth without affecting transparency.
  • Colors — Use color tokens instead of opacity to achieve lighter fills and tints.