Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/visual-layered-shadows.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown31 linesFree

rules/visual-layered-shadows.md

1---
2title: Layer Multiple Shadows for Realistic Depth
3impact: HIGH
4tags: visual, shadow, layered, depth
5---
6 
7## Layer Multiple Shadows for Realistic Depth
8 
9A single box-shadow looks flat. Layer multiple shadows with increasing blur and decreasing opacity to mimic real light.
10 
11**Incorrect (single flat shadow):**
12 
13```css
14.card {
15  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
16}
17```
18 
19**Correct (layered shadows):**
20 
21```css
22.card {
23  box-shadow:
24    0 1px 2px rgba(0, 0, 0, 0.06),
25    0 4px 8px rgba(0, 0, 0, 0.04),
26    0 12px 24px rgba(0, 0, 0, 0.03);
27}
28```
29 
30Reference: [Designing Beautiful Shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/)
31

Preparing the source view

User Interface Wiki

rules/visual-layered-shadows.md