Opacity: 50%
Explore the opacity-50 utility and see how it controls element transparency.
Opacity Preview
opacity-50
This element has 50% opacity
Class: opacity-50
CSS: opacity: 0.50
Value: 50%
Compare with Other Opacity Values
0%
opacity-025%
opacity-2550%
opacity-5075%
opacity-75100%
opacity-100Usage Examples
Overlays & Modals
25% overlay
Content
With overlay
50% overlay
Content
With overlay
Hover Effects
Layering
Multiple layers with different opacity
Interactive Opacity Demo
Customize Element
0%25%50%75%100%
Preview
Custom Element
50% opacity
Classes: from-blue-500 to-purple-600 rounded-lg
Opacity: 50%
CSS: opacity: 0.50