<div class="bg-opacity-50 bg-teal-400 m-2 h-16 w-16"></div>
← Tailwind CSS classes list
Tailwind CSS class: .bg-opacity-50
Preview
Use Shuffle AI to build your own Tailwind CSS templates
Quickly design stunning Tailwind CSS templates with the power of Shuffle AI — no coding required.
Check .bg-opacity-50 in a real project
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
CSS source
.bg-opacity-50 { --bg-opacity: 0.5; }More in Tailwind CSS Background
- .bg-auto
- .bg-cover
- .bg-contain
- .bg-bottom
- .bg-top
- .bg-center
- .bg-left
- .bg-left-bottom
- .bg-left-top
- .bg-right
- .bg-right-bottom
- .bg-right-top
- .bg-fixed
- .bg-local
- .bg-scroll
- .bg-no-repeat
- .bg-repeat
- .bg-repeat-x
- .bg-repeat-y
- .bg-repeat-round
- .bg-repeat-space
- .bg-opacity-0
- .bg-opacity-25
- .bg-opacity-75
- .bg-opacity-100
- .bg-none