Opacity

Take control of your design's transparency with Vitamin's expanded opacity options. With a wider range of classes, easily adjust the opacity of your elements to create stunning visuals.

More variants

with vitamin now you have support for 0-100% counting by 5s by default.
Supported variants are 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95 & 100

Responsive

The same way you use the responsive properties for other elements, now you can use for .opacity just adding the resolution variant sm, md, lg, xl, xxl

Examples

Here are some representative examples of these classes:

    
.opacity-10 {
opacity: 0.1 !important;
}

.rotate-r-2 {
transform: rotate(2deg);
}
      
@media (min-width: 576px)
.opacity-sm-20 {
opacity: .2!important;
}

@media (min-width: 768px)
.opacity-md-40 {
opacity: .4!important;
}