#Opacity

New

0.7.0

These are utility classes that specify the z-index of elements.

Class	Styles
`u-opacity-0`	`opacity: 0 !important`
`u-opacity-10`	`opacity: 0.1 !important`
`u-opacity-20`	`opacity: 0.2 !important`
`u-opacity-30`	`opacity: 0.3 !important`
`u-opacity-40`	`opacity: 0.4 !important`
`u-opacity-50`	`opacity: 0.5 !important`
`u-opacity-60`	`opacity: 0.6 !important`
`u-opacity-70`	`opacity: 0.7 !important`
`u-opacity-80`	`opacity: 0.8 !important`
`u-opacity-90`	`opacity: 0.9 !important`
`u-opacity-100`	`opacity: 1 !important`

#Examples

Below is a demo of all supported opacity utility classes.

<div class="py-2">
    <button class="btn-info mx-1 u-opacity-0">0%</button>
    <button class="btn-info mx-1 u-opacity-10">10%</button>
    <button class="btn-info mx-1 u-opacity-20">20%</button>
    <button class="btn-info mx-1 u-opacity-30">30%</button>
    <button class="btn-info mx-1 u-opacity-40">40%</button>
    <button class="btn-info mx-1 u-opacity-50">50%</button>
    <button class="btn-info mx-1 u-opacity-60">60%</button>
    <button class="btn-info mx-1 u-opacity-70">70%</button>
    <button class="btn-info mx-1 u-opacity-80">80%</button>
    <button class="btn-info mx-1 u-opacity-90">90%</button>
    <button class="btn-info mx-1 u-opacity-100">100%</button>
</div>

#Property Specific

New

0.7.0

With the new color opacity modifiers, you can now modify the opacity for background, border, and text colors instead of the whole element.

Background	Text	Border
`u-bg-opacity-0`	`u-color-opacity-0`	`u-border-opacity-0`
`u-bg-opacity-10`	`u-color-opacity-10`	`u-border-opacity-10`
`u-bg-opacity-20`	`u-color-opacity-20`	`u-border-opacity-20`
`u-bg-opacity-30`	`u-color-opacity-30`	`u-border-opacity-30`
`u-bg-opacity-40`	`u-color-opacity-40`	`u-border-opacity-40`
`u-bg-opacity-50`	`u-color-opacity-50`	`u-border-opacity-50`
`u-bg-opacity-60`	`u-color-opacity-60`	`u-border-opacity-60`
`u-bg-opacity-70`	`u-color-opacity-70`	`u-border-opacity-70`
`u-bg-opacity-80`	`u-color-opacity-80`	`u-border-opacity-80`
`u-bg-opacity-90`	`u-color-opacity-90`	`u-border-opacity-90`
`u-bg-opacity-100`	`u-color-opacity-100`	`u-border-opacity-100`

Changing Background Opacity

Use the background opacity utility classes to control an element's background color opacity. You can use any opacity value that is defined in the opacity scale.

<button class="u-bg-opacity-100 ...">100%</button>
<button class="u-bg-opacity-90 ...">90%</button>
<button class="u-bg-opacity-80 ...">80%</button>
<button class="u-bg-opacity-70 ...">70%</button>
<button class="u-bg-opacity-60 ...">60%</button>
<button class="u-bg-opacity-50 ...">50%</button>
<button class="u-bg-opacity-40 ...">40%</button>
<button class="u-bg-opacity-30 ...">30%</button>
<button class="u-bg-opacity-20 ...">20%</button>
<button class="u-bg-opacity-10 ...">10%</button>
<button class="u-bg-opacity-0 ...">0%</button>

Changing Color Opacity

Use the color opacity utility classes to control an element's text color opacity. You can use any opacity value that is defined in the opacity scale.

The quick brown fox jumps over the lazy dog.

<p class="u-color-opacity-100 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-90 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-80 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-70 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-60 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-50 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-40 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-30 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-20 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-10 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-0 ...">The quick brown fox jumps over the lazy dog.</p>

Changing Border Opacity

New

0.7.1

Use the border opacity utility classes to control an element's border color opacity. You can use any opacity value that is defined in the opacity scale.

100

<div class="u-border-opacity-20 ...">
    <div>1</div>
</div>
<div class="u-border-opacity-40 ...">
    <div>40</div>
</div>
<div class="u-border-opacity-60 ...">
    <div>60</div>
</div>
<div class="u-border-opacity-80 ...">
    <div>80</div>
</div>
<div class="u-border-opacity-100 ...">
    <div>100</div>
</div>

#Responsive

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, use u-opacity-50-md to apply opacity: 0.5 to an element only at medium screen sizes and above.

<div class="u-opacity-50-md">
    <!-- ... -->
</div>
<div class="u-bg-opacity-50-md">
    <!-- ... -->
</div>
<div class="u-color-opacity-50-md">
    <!-- ... -->
</div>
<div class="u-border-opacity-50-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting opacities. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        opacity: (
            25: .25,
            75: .75,
        )
    )
) !default;

This would generate the following classes.

.u-opacity-25 {
    opacity: .25 !important;
}
.u-opacity-75 {
    opacity: .75 !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.

Cirrus