Learn to read Figma drop shadow, inner shadow, and layer blur effects from the Inspect panel and translate them to exact CSS box-shadow, filter, and backdrop-filter properties without guessing values.
Effects in Figma — shadows, blurs, and background blurs — are among the most commonly misimplemented design properties. Developers often eyeball shadow values or copy them from old projects, resulting in shadows that look 'close enough' but create subtle visual inconsistencies across components.
Figma reports shadow values with exact precision: X offset, Y offset, blur radius, spread radius, color, and opacity. Each parameter maps directly to a CSS box-shadow value. Understanding this mapping eliminates all guesswork and produces shadows that match the design file exactly.
Figma's drop shadow effect is reported in the Effects section of the Inspect panel. The properties are:
Figma shadow to CSS box-shadow mapping:
1Figma: X=0, Y=4, Blur=6, Spread=-1, Color=#000000, Opacity=5%
2CSS: box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.05);
3
4CSS order: offset-x | offset-y | blur-radius | spread-radius | colorKey difference: Figma's 'Opacity' field modifies the color — it is NOT the same as CSS layer opacity.
1/* Shadow conversion examples from Figma Inspect */
2
3/* Figma: X=0, Y=1, Blur=2, Spread=0, #000 8% */
4.shadow-xs { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08); }
5
6/* Figma: X=0, Y=1, Blur=3, Spread=0, #000 10% AND X=0, Y=1, Blur=2, #000 6% */
7/* Multiple shadows: Figma layers them, CSS separates with comma */
8.shadow-sm { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px 0 rgb(0 0 0 / 0.06); }
9
10/* Figma: X=0, Y=4, Blur=6, Spread=-1, #000 10% AND X=0, Y=2, Blur=4, #000 6% */
11.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -1px rgb(0 0 0 / 0.06); }
12
13/* Figma: X=0, Y=10, Blur=15, Spread=-3, #000 10% AND X=0, Y=4, Blur=6, #000 5% */
14.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -2px rgb(0 0 0 / 0.05); }
15
16/* Figma: X=0, Y=20, Blur=25, Spread=-5, #000 10% AND X=0, Y=10, Blur=10, #000 4% */
17.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 10px 10px -5px rgb(0 0 0 / 0.04); }
18
19/* Figma: X=0, Y=25, Blur=50, Spread=-12, #000 25% */
20.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }Figma drop shadows do not need to be black. Colored shadows — often using the element's primary brand color at low opacity — create a glow effect that makes components feel elevated and contextually connected.
Figma: Drop Shadow, X=0, Y=4, Blur=16, Spread=0, Color=#2563EB, Opacity=20%
1/* Brand-colored shadow (card hover state) */
2.card:hover {
3 box-shadow: 0 4px 16px 0 rgb(37 99 235 / 0.20);
4 /* rgb(37 99 235) is #2563EB in decimal */
5}
6
7/* Converting hex to rgb for shadow colors */
8/* #2563EB = rgb(37, 99, 235) */
9/* #16A34A = rgb(22, 163, 74) */
10/* #DC2626 = rgb(220, 38, 38) */
11
12/* Success-colored shadow for success states */
13.btn-success:hover {
14 box-shadow: 0 4px 12px 0 rgb(22 163 74 / 0.25);
15}
16
17/* Danger shadow for destructive action hover */
18.btn-danger:hover {
19 box-shadow: 0 4px 12px 0 rgb(220 38 38 / 0.25);
20}
21
22/* Inner shadow (Figma: Inner Shadow) */
23/* Figma: Inner Shadow, X=0, Y=2, Blur=4, Spread=0, #000 8% */
24.input-pressed {
25 box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.08);
26 /* CSS: add 'inset' keyword before other values */
27}
28
29/* Combining inner and outer shadow */
30.card-active {
31 box-shadow:
32 0 4px 16px rgb(37 99 235 / 0.15), /* outer: brand color */
33 inset 0 0 0 2px #2563eb; /* inner: solid ring */
34}Figma has two blur effects:
Layer Blur:
Figma: Layer Blur, Amount=8
CSS: filter: blur(8px);
Background Blur (Glassmorphism):
Figma: Background Blur, Amount=16
CSS: backdrop-filter: blur(16px);
Important: backdrop-filter requires the element to have a semi-transparent or no background — a fully opaque background would hide the blur effect.
1/* Frosted glass card — from Figma Background Blur effect */
2/* Figma: Background Blur 20px, Fill #FFFFFF 40% */
3.frosted-card {
4 background: rgb(255 255 255 / 0.4); /* Fill: white 40% opacity */
5 backdrop-filter: blur(20px); /* Background Blur: 20px */
6 -webkit-backdrop-filter: blur(20px); /* Safari prefix required */
7 border: 1px solid rgb(255 255 255 / 0.2); /* subtle border */
8 border-radius: 1rem;
9 padding: 1.5rem;
10}
11
12/* Frosted glass navbar (dark variant) */
13/* Figma: Background Blur 12px, Fill #1E293B 80% */
14.frosted-nav {
15 background: rgb(30 41 59 / 0.8);
16 backdrop-filter: blur(12px);
17 -webkit-backdrop-filter: blur(12px);
18 border-bottom: 1px solid rgb(255 255 255 / 0.05);
19}
20
21/* Focus ring with blur (complex focus indicator) */
22.btn:focus-visible {
23 outline: none;
24 box-shadow:
25 0 0 0 3px white, /* white gap ring */
26 0 0 0 5px #2563eb; /* brand color outer ring */
27 /* No blur here — sharp rings are more accessible */
28}
29
30/* Image blur overlay on hover */
31.card-image {
32 overflow: hidden;
33 border-radius: 0.75rem 0.75rem 0 0;
34}
35.card-image img {
36 width: 100%;
37 height: 100%;
38 object-fit: cover;
39 transition: filter 300ms ease;
40}
41.card:hover .card-image img {
42 filter: blur(2px) brightness(0.85);
43 transform: scale(1.05); /* slight zoom with blur */
44 transition: filter 300ms ease, transform 300ms ease;
45}Figma shadow styles — predefined named shadows like 'Elevation/Card', 'Elevation/Modal' — form an elevation system. Building a corresponding CSS elevation scale using custom properties creates a consistent shadow vocabulary.
1/* CSS elevation scale matching Figma shadow style library */
2/* Source: Figma > Styles > Effects */
3:root {
4 /* Elevation/1 — subtle (used on cards at rest) */
5 --shadow-1:
6 0 1px 2px rgb(0 0 0 / 0.04),
7 0 1px 1px rgb(0 0 0 / 0.03);
8
9 /* Elevation/2 — low (cards on hover, dropdowns) */
10 --shadow-2:
11 0 4px 6px rgb(0 0 0 / 0.07),
12 0 2px 4px rgb(0 0 0 / 0.04);
13
14 /* Elevation/3 — medium (floating elements) */
15 --shadow-3:
16 0 10px 15px rgb(0 0 0 / 0.08),
17 0 4px 6px rgb(0 0 0 / 0.04);
18
19 /* Elevation/4 — high (tooltips, popovers) */
20 --shadow-4:
21 0 20px 25px rgb(0 0 0 / 0.08),
22 0 10px 10px rgb(0 0 0 / 0.03);
23
24 /* Elevation/5 — overlay (modals, dialogs) */
25 --shadow-5:
26 0 25px 50px rgb(0 0 0 / 0.18);
27}
28
29/* Semantic shadow assignments */
30.card { box-shadow: var(--shadow-1); }
31.card:hover { box-shadow: var(--shadow-2); }
32.dropdown-menu { box-shadow: var(--shadow-3); }
33.tooltip { box-shadow: var(--shadow-4); }
34.modal-dialog { box-shadow: var(--shadow-5); }
35
36/* Dark mode shadow adjustment */
37/* Shadows are less effective on dark backgrounds */
38/* Increase opacity or use lighter colors */
39@media (prefers-color-scheme: dark) {
40 :root {
41 --shadow-1: 0 1px 2px rgb(0 0 0 / 0.25);
42 --shadow-2: 0 4px 6px rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.2);
43 --shadow-3: 0 10px 15px rgb(0 0 0 / 0.4), 0 4px 6px rgb(0 0 0 / 0.2);
44 --shadow-4: 0 20px 25px rgb(0 0 0 / 0.45), 0 10px 10px rgb(0 0 0 / 0.2);
45 --shadow-5: 0 25px 50px rgb(0 0 0 / 0.6);
46 }
47}A set of cards demonstrating all Figma shadow types — default elevation, hover elevation, colored shadow, inner shadow, and background blur — translated from exact Figma Inspect panel values.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Shadow and Blur Effects Demo</title>
6 <style>
7 :root {
8 --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.03);
9 --shadow-2: 0 4px 6px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.04);
10 --shadow-3: 0 10px 15px rgb(0 0 0 / 0.08), 0 4px 6px rgb(0 0 0 / 0.04);
11 --shadow-5: 0 25px 50px rgb(0 0 0 / 0.18);
12 }
13 *, *::before, *::after { box-sizing: border-box; }
14 body {
15 margin: 0; font-family: system-ui, sans-serif;
16 background: linear-gradient(135deg, #1e3a5f 0%, #0f2444 100%);
17 min-height: 100vh;
18 padding: 3rem 2rem;
19 display: grid;
20 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
21 gap: 1.5rem;
22 align-items: start;
23 }
24 .label { color: #93c5fd; font-size: 0.75rem; font-weight: 700;
25 text-transform: uppercase; letter-spacing: 0.08em;
26 margin-bottom: 0.5rem; }
27
28 /* Standard card: Elevation/1 */
29 .card {
30 background: white;
31 border-radius: 0.75rem;
32 padding: 1.25rem;
33 box-shadow: var(--shadow-1);
34 transition: box-shadow 200ms ease, transform 200ms ease;
35 }
36 .card:hover {
37 box-shadow: var(--shadow-3);
38 transform: translateY(-2px);
39 }
40 .card-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 0.375rem; }
41 .card-body { font-size: 0.875rem; color: #64748b; margin: 0; }
42
43 /* Brand shadow card (Figma: shadow color = brand blue) */
44 .card-brand {
45 background: white;
46 border-radius: 0.75rem;
47 padding: 1.25rem;
48 box-shadow: 0 4px 16px rgb(37 99 235 / 0.12);
49 border: 1px solid hsl(220 90% 56% / 0.2);
50 transition: box-shadow 200ms ease;
51 }
52 .card-brand:hover {
53 box-shadow: 0 8px 24px rgb(37 99 235 / 0.2);
54 }
55
56 /* Inset / pressed card (Inner Shadow) */
57 .card-inset {
58 background: #f1f5f9;
59 border-radius: 0.75rem;
60 padding: 1.25rem;
61 box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.08);
62 border: 1px solid #e2e8f0;
63 }
64
65 /* Frosted glass card (Background Blur) */
66 /* Figma: Background Blur 20px, Fill white 25%, Border white 15% */
67 .card-frosted {
68 background: rgb(255 255 255 / 0.25);
69 backdrop-filter: blur(20px);
70 -webkit-backdrop-filter: blur(20px);
71 border: 1px solid rgb(255 255 255 / 0.2);
72 border-radius: 0.75rem;
73 padding: 1.25rem;
74 color: white;
75 }
76 .card-frosted .card-title { color: white; }
77 .card-frosted .card-body { color: rgb(255 255 255 / 0.75); }
78
79 /* Modal-level shadow */
80 .card-modal {
81 background: white;
82 border-radius: 1rem;
83 padding: 1.5rem;
84 box-shadow: var(--shadow-5);
85 }
86 </style>
87</head>
88<body>
89 <div>
90 <p class="label">Elevation/1 + hover</p>
91 <div class="card">
92 <h3 class="card-title">Standard Card</h3>
93 <p class="card-body">Hover to see shadow elevation increase. Shadow from Figma Inspect panel.</p>
94 </div>
95 </div>
96 <div>
97 <p class="label" style="color:#93c5fd;">Brand-colored shadow</p>
98 <div class="card-brand">
99 <h3 class="card-title">Brand Card</h3>
100 <p class="card-body">Colored shadow using brand blue at 12% opacity — creates brand-connected elevation.</p>
101 </div>
102 </div>
103 <div>
104 <p class="label" style="color:#93c5fd;">Inner shadow (pressed)</p>
105 <div class="card-inset">
106 <h3 class="card-title" style="color:#0f172a;">Inset Card</h3>
107 <p class="card-body">Inner shadow creates a recessed, pressed appearance. CSS: box-shadow: inset.</p>
108 </div>
109 </div>
110 <div>
111 <p class="label">Frosted glass (backdrop-filter)</p>
112 <div class="card-frosted">
113 <h3 class="card-title">Frosted Glass</h3>
114 <p class="card-body">20px background blur with semi-transparent fill. Figma: Background Blur effect.</p>
115 </div>
116 </div>
117 <div>
118 <p class="label" style="color:#93c5fd;">Elevation/5 (modal level)</p>
119 <div class="card-modal">
120 <h3 class="card-title">Modal-Level Shadow</h3>
121 <p class="card-body">Deepest shadow tier — used for modal dialogs. 25px blur, 12px negative spread.</p>
122 </div>
123 </div>
124</body>
125</html>Each card demonstrates a distinct Figma shadow effect type translated to CSS. The standard card uses the elevation scale variables (--shadow-1, --shadow-3). The brand card uses a custom box-shadow with the brand blue color in rgb() notation with opacity — rgb(37 99 235 / 0.12) is the CSS equivalent of Figma's 'Drop Shadow, Color #2563EB, Opacity 12%'. The inset card uses the CSS 'inset' keyword, which maps to Figma's 'Inner Shadow' effect type. The frosted glass card uses backdrop-filter: blur(20px) with a semi-transparent background — this is Figma's 'Background Blur' effect, which requires the fill color to have opacity below 100%.
The next lesson covers Figma's prototyping basics — connecting frames with hotspots, reading interaction specifications, and translating prototype flows into CSS transitions and ARIA state management.
Your progress is saved in this browser, on this device only.