Opacity

Utilities for controlling the opacity of an element.

Table of Contents

• Basic Usage
• Quick Reference
• Variants
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

WDiv(className: 'opacity-100 bg-blue-500')
WDiv(className: 'opacity-75 bg-blue-500')
WDiv(className: 'opacity-50 bg-blue-500')
WDiv(className: 'opacity-25 bg-blue-500')
WDiv(className: 'opacity-0 bg-blue-500')

Basic Usage

Control the opacity of an element using opacity-{value} utilities. This affects the entire element, including its content, background, and borders.

WDiv(
  className: 'opacity-50 bg-blue-500 text-white p-4',
  child: WText('This entire element is 50% opaque'),
)

[!NOTE] This utility sets the Flutter Opacity widget or color.withOpacity() equivalent depending on context. To change only the background color's opacity without affecting text, use the color opacity modifier (e.g., bg-blue-500/50) instead.

Quick Reference

Variants

Wind supports all standard state variants for opacity.

// Change opacity on hover
WDiv(className: 'opacity-50 hover:opacity-100')

// Change opacity when button is disabled
WButton(className: 'bg-blue-500 disabled:opacity-50')

// Change opacity on focus
WInput(className: 'opacity-75 focus:opacity-100')

Responsive Design

Change opacity based on screen size using responsive prefixes.

WDiv(className: 'opacity-100 md:opacity-50 lg:opacity-25')

Dark Mode

Adjust opacity based on the current theme brightness.

WDiv(className: 'opacity-100 dark:opacity-80')

Arbitrary Values

Use square brackets to define a custom opacity value between 0.0 and 1.0.

WDiv(className: 'opacity-[0.67]')
WDiv(className: 'opacity-[0.125]')

[!WARNING] Values are clamped between 0.0 and 1.0. opacity-[1.5] will resolve to 1.0.

Customizing Theme

You can customize the available opacity scale in your WindThemeData.

WindTheme(
  data: WindThemeData(
    opacities: {
      'disabled': 0.35,
      'faint': 0.10,
      'glass': 0.85,
    },
  ),
  child: MyApp(),
)

Now you can use these custom keys in your utilities:

WDiv(className: 'opacity-disabled') // 0.35
WDiv(className: 'opacity-glass')    // 0.85

Related Documentation

• Background Color - Using /alpha modifiers for backgrounds
• Text Color - Using /alpha modifiers for text
• Shadow - Box shadow utilities