Docs / Blur

Blur

vel-src: effects.css

Utilities for applying blur filters to an element.

ClassProperties
vel-blur-nonefilter: blur(0)
vel-blur-smfilter: blur(4px)
vel-blurfilter: blur(8px)
vel-blur-mdfilter: blur(12px)
vel-blur-lgfilter: blur(16px)
vel-blur-xlfilter: blur(24px)
vel-blur-2xlfilter: blur(40px)
vel-blur-3xlfilter: blur(64px)

Examples

Blur scale

none

sm

8px

md

lg

xl

example.html
<div style="display:flex;gap:12px;padding:1rem;background:#060b17;flex-wrap:wrap;align-items:center;">
  <div style="text-align:center;">
    <div class="vel-blur-none vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">none</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-blur-sm vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">sm</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-blur vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">8px</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-blur-md vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">md</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-blur-lg vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">lg</p>
  </div>
  <div style="text-align:center;">
    <div class="vel-blur-xl vel-bg-gradient-primary vel-rounded-md" style="width:64px;height:64px;"></div>
    <p style="color:#64748b;font-size:0.7rem;margin-top:4px;">xl</p>
  </div>
</div>