Opacity
Utilities for controlling the opacity of an element.
On this page
effects/opacity
The live demo is not available for this example.
opacity.dart
View source
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'),
)
Quick Reference#
| Class | Value | Description |
|---|---|---|
opacity-0 |
0 | Fully transparent |
opacity-5 |
0.05 | |
opacity-10 |
0.1 | |
opacity-20 |
0.2 | |
opacity-25 |
0.25 | |
opacity-30 |
0.3 | |
opacity-40 |
0.4 | |
opacity-50 |
0.5 | |
opacity-60 |
0.6 | |
opacity-70 |
0.7 | |
opacity-75 |
0.75 | |
opacity-80 |
0.8 | |
opacity-90 |
0.9 | |
opacity-95 |
0.95 | |
opacity-100 |
1 | Fully opaque |
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]')
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
/alphamodifiers for backgrounds - Text Color - Using
/alphamodifiers for text - Shadow - Box shadow utilities