Effects — uicraft

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="uc-shadow-none uc-rounded-xl uc-bg-neutrals-surface">...</div>
<div class="uc-shadow-sm ...">...</div>
<div class="uc-shadow ...">...</div>
<div class="uc-shadow-md ...">...</div>
<div class="uc-shadow-lg ...">...</div>
<div class="uc-shadow-xl ...">...</div>
<div class="uc-shadow-2xl ...">...</div>
<div class="uc-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, sheets, 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="uc-rounded-2xl uc-border uc-border-border-default uc-bg-neutrals-surface uc-p-4 uc-shadow-sm">
  <div class="uc-text-xs uc-font-semibold">shadow-sm</div>
  <div class="uc-text-[10px] uc-text-fg-disabled">Default card</div>
</div>
<div class="uc-rounded-2xl ... uc-shadow-md">...</div>
<div class="uc-rounded-2xl ... uc-shadow-xl">...</div>

html

Buttons

<button class="uc-h-10 uc-px-4 uc-rounded-lg uc-text-sm uc-font-medium uc-bg-accents-blue uc-text-constant-white uc-shadow-sm">
  shadow-sm
</button>
<button class="... uc-shadow-md">shadow-md</button>
<button class="... uc-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="uc-relative uc-w-24 uc-h-24 uc-rounded-xl uc-overflow-hidden">
  <img src="/bg.jpg" alt="" class="uc-absolute uc-inset-0 uc-w-full uc-h-full uc-object-cover" />
  <div class="uc-absolute uc-inset-2 uc-rounded-lg uc-bg-white/30 uc-backdrop-blur-sm">...</div>
</div>
<div class="... uc-backdrop-blur">...</div>
<div class="... uc-backdrop-blur-md">...</div>
<div class="... uc-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="uc-relative uc-rounded-xl uc-overflow-hidden uc-h-48">
  <img src="/bg.jpg" alt="" class="uc-absolute uc-inset-0 uc-w-full uc-h-full uc-object-cover" />
  <div class="uc-absolute uc-top-0 uc-inset-x-0 uc-h-12 uc-bg-white/20 uc-dark:bg-black/20 uc-backdrop-blur-lg uc-border-b uc-border-white/20">
    ...
  </div>
</div>

html

Glass Card

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

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

html

Modal Overlay

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

<div class="uc-relative uc-rounded-xl uc-overflow-hidden uc-h-56">
  <img src="/bg.jpg" alt="" class="uc-absolute uc-inset-0 uc-w-full uc-h-full uc-object-cover" />
  <div class="uc-absolute uc-inset-0 uc-bg-black/30 uc-backdrop-blur-sm">
    <div class="uc-w-64 uc-rounded-2xl uc-bg-neutrals-surface uc-shadow-2xl uc-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)