Opacity

Control the opacity of elements.

On this page

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all,.5 is 50% visible, and 0 is completely transparent.

Set the opacity of an element using opacity="{value}" utilities.

100%
75%
50%
25%
vue
<template>
  <b-div flex="sm">
    <b-div
      :opacity="100"
      padding="3"
      margin="2"
      background-color="primary"
      text-color="light"
      font-weight="bold"
      rounded
    >
      100%
    </b-div>
    <b-div
      :opacity="75"
      padding="3"
      margin="2"
      background-color="primary"
      text-color="light"
      font-weight="bold"
      rounded
    >
      75%
    </b-div>
    <b-div
      :opacity="50"
      padding="3"
      margin="2"
      background-color="primary"
      text-color="light"
      font-weight="bold"
      rounded
    >
      50%
    </b-div>
    <b-div
      :opacity="25"
      padding="3"
      margin="2"
      background-color="primary"
      text-color="light"
      font-weight="bold"
      rounded
    >
      25%
    </b-div>
  </b-div>
</template>