Effects — Veritheme

Box Shadows

Elevation scale from subtle to dramatic. Use higher shadows for elements closer to the user.

html

shadow-none

No shadow

shadow-sm

Subtle

shadow

Default

shadow-md

Medium

shadow-lg

Large

shadow-xl

Extra large

shadow-2xl

Highest

shadow-inner

Inset

<div class="vt-shadow-none vt-rounded-xl vt-bg-surfaces-surface">...</div>
<div class="vt-shadow-sm ...">...</div>
<div class="vt-shadow ...">...</div>
<div class="vt-shadow-md ...">...</div>
<div class="vt-shadow-lg ...">...</div>
<div class="vt-shadow-xl ...">...</div>
<div class="vt-shadow-2xl ...">...</div>
<div class="vt-shadow-inner ...">...</div>

Shadow Usage

When to use each elevation level.

Level 0 — Flat

No shadow. Inline elements, table rows, list items.

shadow-none

Level 1 — Raised

Cards, buttons, inputs on focus.

shadow-sm shadow

Level 2 — Floating

Dropdowns, popovers, tooltips, hover cards.

shadow-md shadow-lg

Level 3 — Overlay

Modals, dialogs, drawers.

shadow-xl shadow-2xl

Shadow Examples

Shadows applied to common UI elements.

html

Cards

shadow-sm

Default card

shadow-md

Hover / active card

shadow-xl

Featured card

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-bg-surfaces-surface vt-p-4 vt-shadow-sm">
  <div class="vt-text-xs vt-font-semibold">shadow-sm</div>
  <div class="vt-text-[10px] vt-text-mains-quaternary">Default card</div>
</div>
<div class="vt-rounded-2xl ... vt-shadow-md">...</div>
<div class="vt-rounded-2xl ... vt-shadow-xl">...</div>

html

Buttons

<button class="vt-h-10 vt-px-4 vt-rounded-lg vt-text-sm vt-font-medium vt-bg-info-primary vt-text-generic-white vt-shadow-sm">
  shadow-sm
</button>
<button class="... vt-shadow-md">shadow-md</button>
<button class="... vt-shadow-lg">shadow-lg</button>

Backdrop Blur

Frosted-glass effect using backdrop-filter: blur(). Combine with semi-transparent backgrounds.

html

Aa

blur-none

0px

Aa

blur-sm

4px

Aa

blur

8px

Aa

blur-md

12px

Aa

blur-lg

16px

Aa

blur-xl

24px

Aa

blur-2xl

40px

Aa

blur-3xl

64px

<div class="vt-relative vt-w-24 vt-h-24 vt-rounded-xl vt-overflow-hidden">
  <img src="/bg.jpg" alt="" class="vt-absolute vt-inset-0 vt-w-full vt-h-full vt-object-cover" />
  <div class="vt-absolute vt-inset-2 vt-rounded-lg vt-bg-white/30 vt-backdrop-blur-sm">...</div>
</div>
<div class="... vt-backdrop-blur">...</div>
<div class="... vt-backdrop-blur-md">...</div>
<div class="... vt-backdrop-blur-lg">...</div>

Frosted Glass

Common glass-morphism patterns using backdrop blur with semi-transparent backgrounds.

html

Navigation Bar

bg-white/20 backdrop-blur-lg

<div class="vt-relative vt-rounded-xl vt-overflow-hidden vt-h-48">
  <img src="/bg.jpg" alt="" class="vt-absolute vt-inset-0 vt-w-full vt-h-full vt-object-cover" />
  <div class="vt-absolute vt-top-0 vt-inset-x-0 vt-h-12 vt-bg-white/20 vt-dark:bg-black/20 vt-backdrop-blur-lg vt-border-b vt-border-white/20">
    ...
  </div>
</div>

html

Glass Card

bg-white/15 backdrop-blur-xl border-white/20

<div class="vt-relative vt-rounded-xl vt-overflow-hidden vt-h-56">
  <img src="/bg.jpg" alt="" class="vt-absolute vt-inset-0 vt-w-full vt-h-full vt-object-cover" />
  <div class="vt-rounded-2xl vt-bg-white/15 vt-dark:bg-black/15 vt-backdrop-blur-xl vt-border vt-border-white/20 vt-p-6 vt-shadow-xl">
    ...
  </div>
</div>

html

Modal Overlay

overlay: bg-black/30 backdrop-blur-sm

<div class="vt-relative vt-rounded-xl vt-overflow-hidden vt-h-56">
  <img src="/bg.jpg" alt="" class="vt-absolute vt-inset-0 vt-w-full vt-h-full vt-object-cover" />
  <div class="vt-absolute vt-inset-0 vt-bg-black/30 vt-backdrop-blur-sm">
    <div class="vt-w-64 vt-rounded-2xl vt-bg-surfaces-surface vt-shadow-2xl vt-p-5">
      ...
    </div>
  </div>
</div>

CSS Reference

UC utility classes for shadows and backdrop blur.

Box Shadows

UC Class	CSS Value
shadow-none	none
shadow-sm	0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow	0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px ...
shadow-md	0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px ...
shadow-lg	0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px ...
shadow-xl	0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px ...
shadow-2xl	0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow-inner	inset 0 2px 4px 0 rgb(0 0 0 / 0.05)

Backdrop Blur

UC Class	CSS Value
backdrop-blur-none	blur(0)
backdrop-blur-sm	blur(4px)
backdrop-blur	blur(8px)
backdrop-blur-md	blur(12px)
backdrop-blur-lg	blur(16px)
backdrop-blur-xl	blur(24px)
backdrop-blur-2xl	blur(40px)
backdrop-blur-3xl	blur(64px)