Press/to search

Effects

Opacity

Utilities for sets the transparency of an element.


Class

classcss
opacity-100opacity: 1Text
opacity-75opacity: .75Text
opacity-50opacity: .5Text
opacity-25opacity: .25Text
opacity-0opacity: 0Text

Usage

<!-- Example -->
<y class="opacity-50 ... bg-white h-32 w-32"></y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'opacity',
$property: opacity,
$modifier: (
65: .65,
85: .85
//...
)
);

// Add Variants
@include yogurt(
$class: 'opacity',
$property: opacity,
$modifier: (
65: .65,
85: .85
//...
),
$variant: (
'responsive',
'hover',
'focus', 'focus-within', 'focus-visible'
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.