Docs / Brightness
Brightness
vel-src: effects.css
Utilities for applying brightness filter functions to an element.
| Class | Properties |
|---|
| vel-brightness-0 | filter: brightness(0) |
| vel-brightness-50 | filter: brightness(0.5) |
| vel-brightness-75 | filter: brightness(0.75) |
| vel-brightness-90 | filter: brightness(0.9) |
| vel-brightness-95 | filter: brightness(0.95) |
| vel-brightness-100 | filter: brightness(1) |
| vel-brightness-105 | filter: brightness(1.05) |
| vel-brightness-110 | filter: brightness(1.1) |
| vel-brightness-125 | filter: brightness(1.25) |
| vel-brightness-150 | filter: brightness(1.5) |
| vel-brightness-200 | filter: brightness(2) |
Examples
Brightness scale
<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>