Grayscale & Filters

vel-src: effects.css

Utilities for applying grayscale, invert, sepia, saturate, and contrast CSS filter functions.

Class	Properties
vel-grayscale	filter: grayscale(100%)
vel-grayscale-0	filter: grayscale(0)
vel-invert	filter: invert(100%)
vel-invert-0	filter: invert(0)
vel-sepia	filter: sepia(100%)
vel-sepia-0	filter: sepia(0)
vel-saturate-0	filter: saturate(0)
vel-saturate-50	filter: saturate(0.5)
vel-saturate-100	filter: saturate(1)
vel-saturate-150	filter: saturate(1.5)
vel-saturate-200	filter: saturate(2)
vel-contrast-0	filter: contrast(0)
vel-contrast-50	filter: contrast(0.5)
vel-contrast-75	filter: contrast(0.75)
vel-contrast-100	filter: contrast(1)
vel-contrast-125	filter: contrast(1.25)
vel-contrast-150	filter: contrast(1.5)
vel-contrast-200	filter: contrast(2)

Examples

Grayscale, sepia, and invert

normal

grayscale

sepia

invert

example.html

<div style="display:flex;gap:12px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div style="text-align:center;">
    <div class="vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">normal</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-primary vel-grayscale vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">grayscale</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-primary vel-sepia vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">sepia</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-primary vel-invert vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">invert</p>
  </div>
</div>

Saturate and contrast

saturate-0

saturate-100

saturate-200

contrast-50

contrast-150

example.html

<div style="display:flex;gap:12px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div style="text-align:center;">
    <div class="vel-bg-gradient-sunset vel-saturate-0 vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">saturate-0</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-sunset vel-saturate-100 vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">saturate-100</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-sunset vel-saturate-200 vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">saturate-200</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-sunset vel-contrast-50 vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">contrast-50</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-bg-gradient-sunset vel-contrast-150 vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">contrast-150</p>
  </div>
</div>