Docs / Opacity

Opacity

vel-src: effects.css

Utilities for controlling the opacity of an element.

ClassProperties
vel-opacity-0opacity: 0
vel-opacity-5opacity: 0.05
vel-opacity-10opacity: 0.1
vel-opacity-20opacity: 0.2
vel-opacity-25opacity: 0.25
vel-opacity-30opacity: 0.3
vel-opacity-40opacity: 0.4
vel-opacity-50opacity: 0.5
vel-opacity-60opacity: 0.6
vel-opacity-70opacity: 0.7
vel-opacity-75opacity: 0.75
vel-opacity-80opacity: 0.8
vel-opacity-90opacity: 0.9
vel-opacity-95opacity: 0.95
vel-opacity-100opacity: 1

Examples

Opacity scale

example.html
<div style="display:flex;gap:8px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <div class="vel-bg-primary vel-opacity-10 vel-rounded-md" style="width:48px;height:48px;"></div>
  <div class="vel-bg-primary vel-opacity-25 vel-rounded-md" style="width:48px;height:48px;"></div>
  <div class="vel-bg-primary vel-opacity-50 vel-rounded-md" style="width:48px;height:48px;"></div>
  <div class="vel-bg-primary vel-opacity-75 vel-rounded-md" style="width:48px;height:48px;"></div>
  <div class="vel-bg-primary vel-opacity-90 vel-rounded-md" style="width:48px;height:48px;"></div>
  <div class="vel-bg-primary vel-opacity-100 vel-rounded-md" style="width:48px;height:48px;"></div>
</div>