Docs / Backdrop Blur

Backdrop Blur

vel-src: effects.css

Utilities for applying backdrop blur and other backdrop filter effects to an element.

ClassProperties
vel-backdrop-blur-nonebackdrop-filter: blur(0)
vel-backdrop-blur-smbackdrop-filter: blur(4px)
vel-backdrop-blurbackdrop-filter: blur(8px)
vel-backdrop-blur-mdbackdrop-filter: blur(12px)
vel-backdrop-blur-lgbackdrop-filter: blur(16px)
vel-backdrop-blur-xlbackdrop-filter: blur(24px)
vel-backdrop-blur-2xlbackdrop-filter: blur(40px)
vel-backdrop-blur-3xlbackdrop-filter: blur(64px)
vel-backdrop-brightness-50backdrop-filter: brightness(0.5)
vel-backdrop-brightness-75backdrop-filter: brightness(0.75)
vel-backdrop-brightness-100backdrop-filter: brightness(1)
vel-backdrop-brightness-125backdrop-filter: brightness(1.25)
vel-backdrop-brightness-150backdrop-filter: brightness(1.5)
vel-backdrop-opacity-10backdrop-filter: opacity(0.1)
vel-backdrop-opacity-25backdrop-filter: opacity(0.25)
vel-backdrop-opacity-50backdrop-filter: opacity(0.5)
vel-backdrop-opacity-75backdrop-filter: opacity(0.75)
vel-backdrop-opacity-100backdrop-filter: opacity(1)

Examples

Backdrop blur on a glassmorphism card

Glassmorphism Card

Uses vel-backdrop-blur-md to blur the background through the card.

example.html
<div style="padding:2rem;background:#060b17;position:relative;overflow:hidden;min-height:160px;">
  <!-- Colorful background to show backdrop effect -->
  <div style="position:absolute;inset:0;background:#1a2236;opacity:1;"></div>
  <div style="position:absolute;top:10px;left:10px;width:100px;height:100px;border-radius:50%;background:#ec4899;filter:blur(30px);opacity:0.6;"></div>
  <div style="position:absolute;bottom:10px;right:10px;width:80px;height:80px;border-radius:50%;background:#f97316;filter:blur(25px);opacity:0.6;"></div>

  <!-- Glassmorphism card using backdrop blur -->
  <div class="vel-backdrop-blur-md vel-rounded-xl" style="position:relative;padding:20px 24px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);max-width:280px;">
    <h3 style="color:#fff;margin:0 0 6px;font-size:1rem;font-weight:600;">Glassmorphism Card</h3>
    <p style="color:rgba(255,255,255,0.7);margin:0;font-size:0.85rem;">Uses vel-backdrop-blur-md to blur the background through the card.</p>
  </div>
</div>

Backdrop blur scale comparison

none
sm
8px
md
lg
xl
example.html
<div style="display:flex;gap:12px;padding:2rem;flex-wrap:wrap;position:relative;overflow:hidden;min-height:120px;background:#060b17;">
  <div style="position:absolute;inset:0;background:#111827;opacity:1;"></div>
  <div class="vel-backdrop-blur-none vel-rounded-lg" style="position:relative;padding:12px 16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:0.75rem;text-align:center;min-width:60px;">none</div>
  <div class="vel-backdrop-blur-sm vel-rounded-lg" style="position:relative;padding:12px 16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:0.75rem;text-align:center;min-width:60px;">sm</div>
  <div class="vel-backdrop-blur vel-rounded-lg" style="position:relative;padding:12px 16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:0.75rem;text-align:center;min-width:60px;">8px</div>
  <div class="vel-backdrop-blur-md vel-rounded-lg" style="position:relative;padding:12px 16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:0.75rem;text-align:center;min-width:60px;">md</div>
  <div class="vel-backdrop-blur-lg vel-rounded-lg" style="position:relative;padding:12px 16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:0.75rem;text-align:center;min-width:60px;">lg</div>
  <div class="vel-backdrop-blur-xl vel-rounded-lg" style="position:relative;padding:12px 16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:0.75rem;text-align:center;min-width:60px;">xl</div>
</div>