Opacity

Opacity utilities control the transparency of an element. They are useful for creating overlays, disabled states, visual hierarchy, image treatments, subtle interactions, and layered interface designs without writing custom CSS.

All opacity utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

<div class="opacity-75">
  Semi-transparent content
</div>

Subtle card

<div class="opacity-95 border rounded-3">
  Premium card content
</div>

Muted content

<p class="opacity-75">
  Secondary information.
</p>

Hidden element

<div class="opacity-0">
  Hidden content
</div>

Combining with other utilities

Opacity works well with blur, shadow, background color, and hover utilities.

<!-- Opacity + backdrop blur for glass effect -->
<div class="opacity-75 backdrop-blur">
  Glass Panel
</div>

<!-- Opacity + shadow for premium surface -->
<div class="opacity-95 shadow rounded-3">
  Premium Surface
</div>

<!-- Opacity + hover for interactive feedback -->
<div class="opacity-75 hover:opacity-100">
  Interactive Card
</div>

<!-- Opacity + background color -->
<div class="bg-primary opacity-75 text-white">
  Call To Action
</div>

Opacity scale

Real-world examples

Background overlay

<div class="bg-dark opacity-75">
  Overlay Layer
</div>

Disabled button

<button class="opacity-50">
  Save Changes
</button>

Watermark

<div class="opacity-25">
  FrontAlign
</div>

Hero decoration

<img
  src="/shape.svg"
  class="opacity-50"
  alt="Decoration"
/>

Glass interface

<div class="opacity-95 backdrop-blur border rounded-4">
  Glass Container
</div>

Interactive card

<div class="opacity-75 hover:opacity-100 hover:shadow-medium">
  Feature Card
</div>

Accessibility notes

Opacity affects the entire element, including its text. When reducing opacity on text-heavy content, ensure readability remains acceptable at the chosen value.

• Use opacity-95 for subtle visual softening where full legibility must be maintained.
• Use opacity-75 for secondary content and overlay backgrounds.
• Use opacity-50 for disabled or inactive states — pair with the disabled attribute on interactive elements for full accessibility.
• Use opacity-25 for purely decorative elements where the content does not need to be read.
• Use opacity-0 only when content should be visually hidden but remain present in the DOM — use display: none or hidden instead if the element should be removed from layout and accessibility trees entirely.

Usage notes

• Opacity applies to the entire element including all of its children — it cannot be used to make only the background transparent while keeping text fully opaque. For background-only transparency, use an RGBA or OKLCH color with an alpha channel on the background property instead.
• Combine opacity-75 or opacity-95 with backdrop-blur for glass-morphism panel effects.
• Pair opacity utilities with hover:opacity-1 to create subtle interactive reveal feedback on cards and media elements.
• Use opacity to build visual hierarchy without changing colors unnecessarily — a secondary element at opacity-75 reads as less prominent than its sibling without any color change.
• Avoid reducing text opacity below opacity-75 for readable body content — contrast ratios drop significantly at lower values and fail WCAG AA thresholds.