Opacity

Utilities for controlling the opacity of an element.


Class
Properties
opacity-0
opacity-10
opacity-20
opacity-30
opacity-40
opacity-50
opacity-60
opacity-70
opacity-80
opacity-90
opacity-100

Usage

<div class="bg-primary opacity-100"></div>
<div class="bg-primary opacity-70"></div>
<div class="bg-primary opacity-40"></div>
<div class="bg-primary opacity-10"></div>

Responsive

To control the opacity of an element at a specific breakpoint, use the .opacity-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing opacity utility. For example, use opacity-md-30 to apply the opacity-30 utility at only medium screen sizes and above.

<div class="opacity-30 opacity-md-50 ..."></div>

Customizing

Values

The values for opacity utilities can be customized using the theme's config file:

$theme: (
    opacity: (
        values: (
            0: 0,
            10: 0.1,
            20: 0.2,
            30: 0.3,
            40: 0.4,
            50: 0.5,
            60: 0.6,
            70: 0.7,
            80: 0.8,
            90: 0.9,
+           95: 0.95,
            100: 1
        )
    )
);

States

Use the state option to generate pseudo-class variations. Example pseudo-classes are :hover and :focus. When a list of states are provided, classnames are created for that pseudo-class.

$theme: (
    opacity: (
        state: active
    )
);

Disabling

Remove any of the default utilities associated with the opacity by setting the group key to false.

$theme: (
    opacity: (
        disable: true
    )
);
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->