Opacity mixins

Controls element transparency with customizable opacity values and interactive states.

<!-- Basic opacity -->
<div class="opacity-50">This element has 50% opacity</div>
<!-- Responsive opacity -->
<div class="opacity-100 opacity-50@md">
  100% opacity by default, 50% on medium screens and up
</div>
<!-- Interactive states -->
<div class="opacity-50 hover:opacity-100">
  50% opacity, becomes fully visible on hover
</div>
<button class="opacity-70 focus:opacity-100">
  70% opacity, fully visible when focused
</button>
<div class="opacity-75 active:opacity-100">
  75% opacity, fully visible when clicked/active
</div>
<!-- Group hover effect -->
<div class="group">
  <h3>Parent element with "group" class</h3>
  <div class="opacity-0 group-hover:opacity-100">
    Hidden by default, visible when parent is hovered
  </div>
</div>
<!-- With transition -->
<div class="opacity-50 hover:opacity-100 transition-opacity">
  Smooth opacity transition on hover
</div>

Base:

• opacity-{value}: Sets element opacity (0-100%)
• Values: the $opacities keys (0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100 by default)

Interactive states:

• hover:opacity-{value}: Changes opacity on mouse hover
• focus:opacity-{value}: Changes opacity when element receives focus
• active:opacity-{value}: Changes opacity when element is active/pressed
• group-hover:opacity-{value}: Changes opacity when parent with .group class is hovered

Animation:

• transition-opacity: Adds smooth transition when opacity changes

Responsive: all opacity classes support responsive variants using the @breakpoint suffix:

• opacity-50@sm: 50% opacity on small screens and up
• hover:opacity-100@md: Full opacity on hover for medium screens and up

Available breakpoints: xs, sm, md, lg, xl, 2xl

Customization: opacity values are defined in the $opacities map (config/_opacity.scss) and emitted as --wu-opacity-{key} tokens.

Transition timing can be customized via CSS variables.

See also the transitions utilities (utilities/_transitions.scss).

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Opacity. The A to Z index lists every public mixin and function.

Source: utilities/_opacity.scss

Mixins

opacity

opacity mixin

Sets opacity from a $opacities key, emitted as var(--wu-opacity-*) as in .opacity-50, or passes a percentage, calc(), var() or CSS-wide keyword through; a bare 0.5 raises an error.

@mixin opacity($value)

Parameter	Type	Default	Description
$value	Number|Percentage|String	Required	$opacities key (0, 5, 10 ... 100), percentage, calc(), var() or CSS-wide keyword

Example

.badge-muted {
  @include opacity(50); // opacity: var(--wu-opacity-50), 0.5 by default
}
.ghost {
  @include apply(opacity(75) hover);
}

Compiled CSS

.badge-muted {
  opacity: var(--wu-opacity-50);
}

.ghost:hover {
  opacity: var(--wu-opacity-75);
}

opacity on MDN

Source: utilities/_opacity.scss:133