Opacity Utilities

NuvoUI's opacity utilities provide a comprehensive system for controlling element transparency, allowing you to create subtle visual effects, fade elements, and build interactive components with ease.

Quick Overview

• Control element transparency with .opacity-{value} classes
• Interactive states with hover:, focus:, and active: prefixes
• Group hover effects with group and group-hover:
• Responsive opacity with @breakpoint suffixes
• Smooth transitions with .transition-opacity

Basic Opacity

Control element transparency with the .opacity-{value} utility classes. Values range from 0 (completely transparent) to 100 (fully opaque).

.opacity-0

Completely Transparent

.opacity-25

25% Opacity

.opacity-50

50% Opacity

.opacity-75

75% Opacity

.opacity-100

Fully Opaque

Class	Properties	Description
.opacity-0	opacity: 0;	Completely transparent (invisible)
.opacity-5	opacity: 0.05;	5% opacity (barely visible)
.opacity-10	opacity: 0.1;	10% opacity (very faint)
.opacity-20	opacity: 0.2;	20% opacity (faint)
.opacity-25	opacity: 0.25;	25% opacity (quarter opacity)
.opacity-30	opacity: 0.3;	30% opacity
.opacity-40	opacity: 0.4;	40% opacity
.opacity-50	opacity: 0.5;	50% opacity (half transparent)
.opacity-60	opacity: 0.6;	60% opacity
.opacity-70	opacity: 0.7;	70% opacity
.opacity-75	opacity: 0.75;	75% opacity (three-quarters opaque)
.opacity-80	opacity: 0.8;	80% opacity
.opacity-90	opacity: 0.9;	90% opacity (almost fully opaque)
.opacity-100	opacity: 1;	Fully opaque (default)

Basic Usage

Interactive States

Control opacity during user interaction with hover, focus, and active variants.

Hover States

Use .hover:opacity-{value} to change opacity when users hover over an element.

Focus States

Use .focus:opacity-{value} to change opacity when an element receives focus.

Active States

Use .active:opacity-{value} to change opacity when an element is active (pressed).

Group Hover Effects

Create interactive components where child elements change opacity when a parent is hovered by combining the .group class with .group-hover:opacity-{value}.

Layering with Opacity

Combine opacity with positioning and z-index to create layered interfaces.

Responsive Opacity

Control opacity at different viewport sizes with responsive variants using the @breakpoint suffix.

Breakpoint	Screen Width	Example
xs	≥ 480px	.opacity-50@xs
sm	≥ 640px	.opacity-50@sm
md	≥ 768px	.opacity-50@md
lg	≥ 1024px	.opacity-50@lg
xl	≥ 1280px	.opacity-50@xl
xxl	≥ 1536px	.opacity-50@xxl

Responsive Examples

Resize your browser to see these elements change opacity at different breakpoints:

Note: The transition between breakpoints may not be visible in the preview. Try it in your own browser to see the full effect.

Adding Smooth Transitions

Use .transition-opacity to add smooth transitions when opacity changes:

You can also customize the transition duration and timing function:

Practical Examples

Image Gallery with Hover Effects

Disabled Button States

Loading States

Modal Backdrop

SCSS Usage

For more advanced use cases, you can use NuvoUI's opacity mixins directly in your SCSS:

Opacity Mixins

Mixin	Description	Parameters
@include NuvoUI.opacity($value)	Sets element opacity	$value: Opacity value from 0-100

Basic SCSS Usage

Responsive Opacity with SCSS

Creating Custom Components

Combining with Other Utilities

Opacity utilities work well in combination with other NuvoUI utilities to create powerful effects:

With Background Colors

With Transitions

With Filters

Best Practices

When to Use Opacity

• Do use opacity for:
  • Creating subtle visual hierarchy
  • Indicating interactive states (hover, disabled, etc.)
  • Transitioning elements in and out of view
  • Creating overlays and background effects
• Don't use opacity for:
  • Text that needs to remain readable (use proper contrast instead)
  • Critical UI elements that users need to interact with
  • When only the background needs transparency (use rgba colors instead)

Accessibility Concerns

• Ensure sufficient contrast for text elements, even with reduced opacity
• Don't rely solely on opacity changes to indicate interactive states
• Test with screen readers to ensure content is properly accessible
• Consider users with visual impairments when using low opacity values

Contrast Example

Opacity: 100% (Good contrast)

Opacity: 75% (Still readable)

Opacity: 50% (Becoming difficult)

Opacity: 25% (Poor contrast!)

rgba(255, 255, 255, 1)

rgba(255, 255, 255, 0.75)

rgba(255, 255, 255, 0.5)

rgba(255, 255, 255, 0.25)

Performance Considerations

• Opacity changes can trigger layout calculations when used with certain properties
• For large elements or frequent animations, consider using will-change: opacity for better performance
• Combining opacity changes with transforms (scale, translate) is more performant than width/height changes

Background vs. Element Opacity

Understanding the difference between element opacity and background opacity:

SASS Variables

NuvoUI's opacity utilities are built on a configurable set of percentage values: