Docs / Brightness

Brightness

vel-src: effects.css

Utilities for applying brightness filter functions to an element.

ClassProperties
vel-brightness-0filter: brightness(0)
vel-brightness-50filter: brightness(0.5)
vel-brightness-75filter: brightness(0.75)
vel-brightness-90filter: brightness(0.9)
vel-brightness-95filter: brightness(0.95)
vel-brightness-100filter: brightness(1)
vel-brightness-105filter: brightness(1.05)
vel-brightness-110filter: brightness(1.1)
vel-brightness-125filter: brightness(1.25)
vel-brightness-150filter: brightness(1.5)
vel-brightness-200filter: brightness(2)

Examples

Brightness scale

50

75

100

125

150

200

example.html
<div style="display:flex;gap:8px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:flex-end;">
  <div style="text-align:center;">
    <div class="vel-brightness-50 vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
    <p style="color:#64748b;font-size:0.65rem;margin-top:4px;">50</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-brightness-75 vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
    <p style="color:#64748b;font-size:0.65rem;margin-top:4px;">75</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-brightness-100 vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
    <p style="color:#64748b;font-size:0.65rem;margin-top:4px;">100</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-brightness-125 vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
    <p style="color:#64748b;font-size:0.65rem;margin-top:4px;">125</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-brightness-150 vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
    <p style="color:#64748b;font-size:0.65rem;margin-top:4px;">150</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-brightness-200 vel-bg-primary vel-rounded-md" style="width:52px;height:52px;"></div>
    <p style="color:#64748b;font-size:0.65rem;margin-top:4px;">200</p>
  </div>
</div>