-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss-box-shadow.html
More file actions
603 lines (574 loc) · 46 KB
/
Copy pathcss-box-shadow.html
File metadata and controls
603 lines (574 loc) · 46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free CSS Box Shadow Generator — Visual Tool | FreeDevTool</title>
<meta name="description" content="Generate CSS box-shadow code with live sliders for offset, blur, spread, color and inset. Multi-layer shadows, presets, copy-ready output. Free forever.">
<meta name="robots" content="index, follow">
<meta name="author" content="Anees Ur Rehman">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","datePublished":"2026-05-02","dateModified":"2026-05-19","inLanguage":"en-US","isPartOf":{"@type":"WebSite","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Anees Ur Rehman","url":"https://freedevtool.org/about","jobTitle":"Full-stack developer","worksFor":{"@type":"Organization","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<link rel="canonical" href="https://freedevtool.org/css-box-shadow">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap">
<link rel="preload" href="style.css?v=20260502-cards" as="style">
<link rel="stylesheet" href="style.css?v=20260502-cards">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon.svg">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="FreeDevTool — 50+ free, fast, privacy-first developer tools">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<meta name="twitter:title" content="CSS Box Shadow Generator — Layered Shadows Free Tool">
<meta name="twitter:description" content="Visual box-shadow builder with sliders for offset, blur, spread, color, inset. Stack unlimited layers for Material elevations, neumorphism, neon glows.">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3L0CMH3X36"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-3L0CMH3X36');</script>
<meta property="og:title" content="CSS Box Shadow Generator — Free Visual Shadow Tool">
<meta property="og:description" content="Visual CSS box-shadow generator with live preview, multi-layer support, and presets. Copy production-ready CSS instantly.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://freedevtool.org/css-box-shadow">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"CSS Box Shadow Generator","url":"https://freedevtool.org/css-box-shadow","description":"Generate multi-layer CSS box-shadow code with visual sliders, color pickers, and ready-made presets.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What does each value in a CSS box-shadow mean?","acceptedAnswer":{"@type":"Answer","text":"The box-shadow property takes up to six values: horizontal offset (h-offset), vertical offset (v-offset), blur radius, spread radius, color, and an optional inset keyword. Positive h-offset moves the shadow right; positive v-offset moves it down. Blur softens the edge; spread grows or shrinks the whole shadow. The inset keyword makes the shadow fall inside the element instead of outside."}},{"@type":"Question","name":"Can I stack multiple box-shadows on one element?","acceptedAnswer":{"@type":"Answer","text":"Yes. Separate each shadow with a comma inside a single box-shadow declaration. The first shadow renders on top of the next, so layer your sharp, close shadows first and softer, wider shadows after. Stacking multiple shadows is how designers achieve Material Design elevations, neumorphic surfaces, and realistic ambient lighting."}},{"@type":"Question","name":"What is the difference between inset and outer shadows?","acceptedAnswer":{"@type":"Answer","text":"An outer shadow (the default) paints outside the element's border, giving a sense of elevation. An inset shadow paints inside the element, creating a recessed or pressed-in look. Inset shadows are commonly used for input fields, pressed buttons, and inner glows. You can mix inset and outer shadows on the same element by comma-separating them."}},{"@type":"Question","name":"Do box-shadows affect layout or performance?","acceptedAnswer":{"@type":"Answer","text":"Shadows do not affect layout — they are painted outside the box model and do not push neighboring elements. However, large blur radii or many stacked shadows can hurt paint performance, especially on mobile. For animated shadows, prefer the will-change: box-shadow hint or animate a pseudo-element's opacity instead of the shadow itself to stay on the GPU."}},{"@type":"Question","name":"How do I make a soft, realistic shadow?","acceptedAnswer":{"@type":"Answer","text":"Realistic shadows use low opacity (rgba alpha between 0.08 and 0.2), a small vertical offset, and a generous blur. Try stacking two or three layers: a tight near shadow for contact, a medium blur for depth, and a wide soft blur for ambient light. Avoid pure black; a slightly tinted dark color (e.g. rgba(17, 24, 39, 0.15)) reads as more natural."}},{"@type":"Question","name":"What is the difference between box-shadow and filter drop-shadow?","acceptedAnswer":{"@type":"Answer","text":"box-shadow follows the bounding box — a rectangle even with rounded corners. filter drop-shadow follows the alpha channel, so PNGs and SVGs with transparency cast properly shaped shadows. Drop-shadow is heavier to render but produces realistic results for irregular shapes."}},{"@type":"Question","name":"Can I stack multiple box shadows?","acceptedAnswer":{"@type":"Answer","text":"Yes — separate shadows with commas. Multi-layer shadows (2-4 layers at different blur/spread) produce realistic depth. The common modern pattern: one tight shadow for edge crispness, one medium for ambient depth, one broad for the soft halo."}},{"@type":"Question","name":"Why does my box shadow look pixelated?","acceptedAnswer":{"@type":"Answer","text":"Two common causes: (1) blur-radius is 0 or very small — increase it; (2) the shadow is being rendered at a low pixel density and upscaled. On retina displays, a 1px-blur shadow can look harsh at 2x density."}}]}
</script>
<style>
.shadow-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:800px){.shadow-layout{grid-template-columns:1fr}}
.shadow-controls{display:flex;flex-direction:column;gap:14px}
.shadow-slider-row{display:grid;grid-template-columns:110px 1fr 60px;gap:10px;align-items:center}
.shadow-slider-row label{font-size:12px;font-family:var(--mono);color:var(--text2)}
.shadow-slider-row input[type=range]{width:100%;accent-color:var(--accent)}
.shadow-slider-row .val{font-family:var(--mono);font-size:12px;color:var(--text);text-align:right}
.shadow-color-row{display:flex;gap:10px;align-items:center}
.shadow-color-row input[type=color]{width:44px;height:36px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;padding:2px}
.shadow-color-row input[type=text]{flex:1;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:13px}
.shadow-inset-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);font-family:var(--mono);cursor:pointer}
.shadow-preview-wrap{display:flex;align-items:center;justify-content:center;min-height:260px;background:repeating-conic-gradient(var(--bg2) 0% 25%,var(--bg) 0% 50%) 0 0/20px 20px;border-radius:var(--radius);padding:30px}
.shadow-preview-box{width:160px;height:160px;background:#fff;border-radius:12px}
.shadow-presets{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.shadow-presets button{padding:5px 12px;font-size:11px;font-family:var(--mono);background:var(--bg4);border:1px solid var(--border);border-radius:20px;color:var(--text2);cursor:pointer;transition:all .2s}
.shadow-presets button:hover{border-color:var(--accent);color:var(--accent)}
.shadow-layers{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.shadow-layer-tab{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg4);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-family:var(--mono);color:var(--text2);cursor:pointer}
.shadow-layer-tab.active{border-color:var(--accent);color:var(--accent)}
.shadow-layer-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.shadow-layer-row button{padding:5px 12px;font-size:11px;font-family:var(--mono);background:var(--bg4);border:1px solid var(--border);border-radius:20px;color:var(--text2);cursor:pointer}
.shadow-layer-row button:hover{border-color:var(--accent);color:var(--accent)}
.shadow-layer-row button.del{color:#f87171}
.shadow-code{width:100%;min-height:90px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:12px;resize:vertical;box-sizing:border-box}
.shadow-code-actions{display:flex;gap:8px;margin-top:10px}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://freedevtool.org/"
},
{
"@type": "ListItem",
"position": 2,
"name": "All Tools",
"item": "https://freedevtool.org/all-tools"
},
{
"@type": "ListItem",
"position": 3,
"name": "CSS Box Shadow Generator",
"item": "https://freedevtool.org/css-box-shadow"
}
]
}
</script>
<script src="/ga4-events.js" defer></script>
</head>
<body>
<nav>
<a class="nav-logo" href="/" aria-label="FreeDevTool home"><svg class="logo-mark" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" fill="none"><rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" opacity=".12"/><path d="M9.5 8.5L6 12l3.5 3.5M14.5 8.5L18 12l-3.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>FreeDevTool</a>
<div class="nav-links">
<div class="nav-dropdown" id="tools-dropdown">
<a href="all-tools" onclick="event.preventDefault();this.parentElement.classList.toggle('open')" aria-haspopup="true">Tools <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></a>
<div class="nav-dropdown-menu">
<a href="encoding-tools">
<div class="dd-icon">b64</div>
<div class="dd-info"><div class="dd-name">Encoding & Conversion</div><div class="dd-count">11 tools · Base64, YAML, px→rem</div></div>
</a>
<a href="generation-tools">
<div class="dd-icon">{ }</div>
<div class="dd-info"><div class="dd-name">Generation & Formatting</div><div class="dd-count">16 tools · JSON, SQL, gradients</div></div>
</a>
<a href="security-tools">
<div class="dd-icon">#</div>
<div class="dd-info"><div class="dd-name">Security & Hashing</div><div class="dd-count">3 tools · JWT, MD5, SHA</div></div>
</a>
<a href="text-tools">
<div class="dd-icon">.*</div>
<div class="dd-info"><div class="dd-name">Code & Text Tools</div><div class="dd-count">9 tools · Regex, diff, tokens</div></div>
</a>
<a href="devops-tools">
<div class="dd-icon">JS</div>
<div class="dd-info"><div class="dd-name">Optimization & DevOps</div><div class="dd-count">7 tools · Minifiers, cURL, git</div></div>
</a>
<a href="network-tools">
<div class="dd-icon">IP</div>
<div class="dd-info"><div class="dd-name">Network & Time</div><div class="dd-count">4 tools · IP, DNS, timestamps</div></div>
</a>
<a href="seo-tools">
<div class="dd-icon">SEO</div>
<div class="dd-info"><div class="dd-name">SEO & Meta Tools</div><div class="dd-count">3 tools · OG, meta, slug</div></div>
</a>
<div class="nav-dropdown-divider"></div>
<a class="dd-all" href="all-tools">
<div class="dd-icon">All</div>
<div class="dd-info"><div class="dd-name">Browse all 50 tools</div><div class="dd-count">Searchable catalog & categories</div></div>
</a>
</div>
</div>
<a href="/guides">Guides</a>
<a href="about">About</a>
<a href="privacy">Privacy</a>
</div>
</nav>
<div class="wrapper">
<section class="tool-header">
<a class="tool-back" href="/" aria-label="Back to home">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
Back
</a>
<span class="tool-badge">CSS</span>
<h1>CSS Box Shadow Generator</h1>
<p>This CSS box shadow generator builds production-ready shadows with visual sliders for offset, blur, spread, color and the inset keyword. Stack unlimited shadow layers to create Material-style elevations, neumorphic surfaces, neon glows, or soft ambient lighting. Every change updates the live preview and rewrites the CSS in real time, so you can copy the finished declaration straight into your stylesheet. Pick a preset to start fast, or dial in custom values on both axes. All calculation runs in your browser — no sign-up, no tracking, works offline once the page is cached.</p>
<div class="last-updated">Last updated: May 2026 · Written by <a href="/about">Anees Ur Rehman</a>, full-stack developer</div>
</section>
<div class="tool-card">
<div class="card-dots"><span></span><span></span><span></span></div>
<div class="tool-body">
<div class="shadow-presets">
<button onclick="applyPreset('material')">Material</button>
<button onclick="applyPreset('soft')">Soft</button>
<button onclick="applyPreset('hard')">Hard</button>
<button onclick="applyPreset('neon')">Neon</button>
<button onclick="applyPreset('paper')">Paper</button>
</div>
<div class="shadow-layer-row">
<div class="shadow-layers" id="shadow-layers" style="flex-direction:row;flex-wrap:wrap"></div>
<button onclick="addLayer()">+ Add layer</button>
<button class="del" onclick="removeLayer()">Remove</button>
</div>
<div class="shadow-layout">
<div class="shadow-controls">
<div class="shadow-slider-row"><label>H-offset</label><input type="range" id="sh-x" min="-50" max="50" value="0"><div class="val" id="sh-x-v">0px</div></div>
<div class="shadow-slider-row"><label>V-offset</label><input type="range" id="sh-y" min="-50" max="50" value="8"><div class="val" id="sh-y-v">8px</div></div>
<div class="shadow-slider-row"><label>Blur</label><input type="range" id="sh-blur" min="0" max="100" value="24"><div class="val" id="sh-blur-v">24px</div></div>
<div class="shadow-slider-row"><label>Spread</label><input type="range" id="sh-spread" min="-50" max="50" value="0"><div class="val" id="sh-spread-v">0px</div></div>
<div class="shadow-color-row">
<input type="color" id="sh-color" value="#111827">
<input type="text" id="sh-color-hex" value="#111827">
<label class="shadow-inset-toggle"><input type="checkbox" id="sh-inset"> Inset</label>
<label class="shadow-inset-toggle" style="min-width:100px"><span style="min-width:40px">Alpha</span><input type="range" id="sh-alpha" min="0" max="100" value="20" style="flex:1"></label>
</div>
</div>
<div>
<div class="shadow-preview-wrap">
<div class="shadow-preview-box" id="shadow-preview"></div>
</div>
<textarea class="shadow-code" id="shadow-code" readonly></textarea>
<div class="shadow-code-actions">
<button class="btn btn-primary" onclick="copyCss()">Copy CSS</button>
<button class="btn btn-ghost" onclick="resetAll()">Reset</button>
</div>
</div>
</div>
</div>
</div>
<div id="toast" style="position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--accent);color:#000;padding:8px 20px;border-radius:var(--radius);font-size:13px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999">Copied!</div>
<p class="aeo-lead" style="font-size:16px;line-height:1.7;color:var(--text);max-width:760px;margin:24px auto 18px;padding:0 4px">
<strong>The CSS <code>box-shadow</code> property</strong> creates rectangular shadows around an element using up to 6 values: x-offset, y-offset, blur-radius, spread-radius, color, and optional <code>inset</code>. Multiple shadows stack with commas — the modern realistic-shadow trend layers 3-5 shadows at different blurs. This <strong>free CSS box-shadow generator</strong> outputs multi-layer shadows with live preview and starter presets from real design systems.
</p>
<section id="examples" style="max-width:760px;margin:24px auto 32px">
<h2 style="font-size:18px;margin-bottom:14px">Examples</h2>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Subtle elevation§§box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.1);§§Two-layer subtle shadow for cards. Avoids the "stamped" look of a single hard shadow.</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Realistic depth (Vercel/modern UI)§§box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.08);§§Three layers — sharp 1px outline, mid-blur, and broad soft halo — for realistic floating effect.</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Inset shadow (pressed look)§§box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);§§The inset keyword projects the shadow inward — used for "pressed" button states or inset form fields.</strong>
</div>
</section>
<aside class="founder-note" style="max-width:760px;margin:24px auto 32px;padding:20px 24px;background:rgba(0,208,132,0.05);border-left:3px solid var(--accent);border-radius:6px;font-size:14px;line-height:1.7;color:var(--text2)"><div style="font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-weight:600">💡 Why I built this</div><p style="margin:0 0 12px">I built this after spending 40 minutes layering 6 box-shadows to match a Figma design someone considered ‘just a button’. Modern UI design has shifted from one-shadow flat buttons to multi-layer shadows that simulate realistic depth — a trend Vercel’s button system kicked off. This generator handles multi-layer shadows with live preview and provides starter presets from real production design systems.</p><p style="margin:0;font-size:13px;color:var(--text3)">— <a href="/about" style="color:var(--accent);text-decoration:none">Anees Ur Rehman</a>, full-stack developer</p></aside>
<section class="article-section">
<h2>Box-shadow in 2026 — anatomy, layered shadows, and the design-system patterns that ship</h2>
<p>The <code>box-shadow</code> property is one of the oldest CSS3 features — yet good shadows still distinguish a polished interface from one that looks like a wireframe. This guide unpacks the syntax (each of the four numeric values does something specific), the physics-aware patterns Google's Material team and Apple's Human Interface team use to build elevation systems, the new <code>filter: drop-shadow()</code> alternative for irregular shapes, and the performance pitfalls that cause shadow-heavy pages to drop frames during scroll.</p>
<h3>The four numbers — what each value actually does</h3>
<p>The full <code>box-shadow</code> grammar from CSS Backgrounds and Borders Module Level 3:</p>
<pre><code>box-shadow: [inset?] <offset-x> <offset-y> [blur-radius] [spread-radius] [color];</code></pre>
<table class="ref-table">
<thead><tr><th>Value</th><th>Effect</th><th>Direction of "+"</th></tr></thead>
<tbody>
<tr><td><strong>offset-x</strong></td><td>Horizontal shift</td><td>Positive = shadow to the right</td></tr>
<tr><td><strong>offset-y</strong></td><td>Vertical shift</td><td>Positive = shadow below the element</td></tr>
<tr><td><strong>blur-radius</strong></td><td>How soft the edge is</td><td>0 = hard edge; large = diffuse</td></tr>
<tr><td><strong>spread-radius</strong></td><td>Grow / shrink before blur</td><td>Positive = bigger; negative = inset-clipped</td></tr>
<tr><td><strong>color</strong></td><td>Shadow color (any CSS color)</td><td>Default = current text color</td></tr>
<tr><td><strong>inset</strong></td><td>Paint inside the box</td><td>Default is outer (drop) shadow</td></tr>
</tbody>
</table>
<p>The blur and spread interact in non-obvious ways. A 24 px blur with 0 spread creates a 24-pixel-wide gradient on each edge. A −12 px spread with a 24 px blur shrinks the source rectangle first, so you only see the right half of the gradient — useful for tight inner-glow effects.</p>
<h3>Layered shadows — why the best shadows are three shadows</h3>
<p>Real-world shadows are not a single blur. A pen on a desk in a sunlit room casts:</p>
<ol>
<li>A <strong>contact shadow</strong> — sharp, dark, right under the object.</li>
<li>A <strong>key shadow</strong> — a softer mid-distance shadow from the dominant light source.</li>
<li>An <strong>ambient shadow</strong> — a wide, very soft shadow from indirect light bouncing around the room.</li>
</ol>
<p>Material Design and Apple's HIG both encode this in their elevation systems. A typical 8-dp Material card:</p>
<pre><code>box-shadow:
0 1px 2px rgba(0,0,0,.10), /* contact */
0 4px 8px rgba(0,0,0,.08), /* key */
0 12px 24px rgba(0,0,0,.06); /* ambient */</code></pre>
<p>The pattern is: progressively bigger offset and blur, progressively lower opacity. Designers call the result "smell of money" — UIs that feel premium without anyone being able to articulate why.</p>
<h3>Material Design elevation, in CSS form</h3>
<p>The Material 3 elevation tokens, translated to CSS box-shadow:</p>
<table class="ref-table">
<thead><tr><th>Level</th><th>Use for</th><th>Box-shadow</th></tr></thead>
<tbody>
<tr><td>0</td><td>Flat surfaces, app bar at rest</td><td><code>none</code></td></tr>
<tr><td>1</td><td>Cards, switches, raised buttons</td><td><code>0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15)</code></td></tr>
<tr><td>2</td><td>FAB rest, snackbars</td><td><code>0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15)</code></td></tr>
<tr><td>3</td><td>FAB hover, navigation drawer</td><td><code>0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15)</code></td></tr>
<tr><td>4</td><td>Dialogs, picked-up items</td><td><code>0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15)</code></td></tr>
<tr><td>5</td><td>Modal overlays</td><td><code>0 4px 4px rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15)</code></td></tr>
</tbody>
</table>
<h3>Neumorphism — the two-light pattern</h3>
<p>Soft-UI / neumorphic surfaces look extruded out of the background. The trick: two opposing shadows, one lighter than the surface, one darker.</p>
<pre><code>background: #e0e5ec;
box-shadow:
9px 9px 18px #a3b1c6, /* darker, bottom-right */
-9px -9px 18px #ffffff; /* lighter, top-left */</code></pre>
<p>Neumorphism died as a mainstream trend around 2022, partly because the low-contrast aesthetic is an accessibility nightmare. Use it for marketing pages and design portfolios where contrast is decorative; do not ship it in transactional UI.</p>
<h3>Inner shadows for inputs, pressed buttons, and depth</h3>
<p>The <code>inset</code> keyword paints the shadow inside the box. Use cases:</p>
<ul>
<li><strong>Pressed button state:</strong> a small inset shadow at the top creates a "pushed in" feel.</li>
<li><strong>Form field focus:</strong> a soft inset glow draws the eye without changing layout.</li>
<li><strong>Inset highlight on a card:</strong> <code>inset 0 1px 0 rgba(255,255,255,.15)</code> across the top edge mimics a subtle bevel.</li>
<li><strong>Recessed input:</strong> <code>inset 0 2px 4px rgba(0,0,0,.06)</code> makes the field feel carved into the surface.</li>
</ul>
<h3>box-shadow vs filter: drop-shadow() — when to use each</h3>
<table class="ref-table">
<thead><tr><th>Aspect</th><th>box-shadow</th><th>filter: drop-shadow()</th></tr></thead>
<tbody>
<tr><td>Shape followed</td><td>Box (with border-radius)</td><td>Actual painted shape (incl. transparent PNG / SVG cut-outs)</td></tr>
<tr><td>Spread radius</td><td>Yes</td><td>No</td></tr>
<tr><td>Inset shadows</td><td>Yes</td><td>No</td></tr>
<tr><td>Multiple shadows</td><td>Comma-list</td><td>Chain <code>drop-shadow()</code> calls</td></tr>
<tr><td>Performance</td><td>Lower GPU cost</td><td>Higher cost (creates new stacking context)</td></tr>
<tr><td>Best for</td><td>Cards, buttons, rectangles with rounded corners</td><td>Logos, SVG icons, irregular shapes, PNG with transparency</td></tr>
</tbody>
</table>
<h3>Performance — the shadow trap that drops frames</h3>
<p>Box-shadows are GPU-accelerated, but each shadow layer creates a paint area equal to the element rectangle plus the shadow extent on every side. A <code>0 0 100px 100px</code> shadow on a 200×200 box covers 600×600 pixels — nine times the original area. Multiply by stacked layers and you can blow out paint cost on weaker mobile GPUs.</p>
<p>The defensive habits:</p>
<ul>
<li><strong>Animate <code>opacity</code>, not the shadow itself.</strong> Put the shadow on a pseudo-element and fade it in — much cheaper than recomposing blur.</li>
<li><strong>Use <code>transform: translate3d(0,0,0)</code> or <code>will-change: transform</code></strong> on the parent to promote it to its own compositor layer.</li>
<li><strong>Avoid blur radii > 50 px on long lists.</strong> A list of 200 cards each with a 60 px shadow runs the GPU into the ground on scroll.</li>
<li><strong>Prefer one well-tuned shadow to five layered ones</strong> on hot paths (animations, scroll containers).</li>
<li><strong>Test on a low-end device.</strong> Chrome DevTools' "Performance → CPU 4x slowdown" surfaces shadow-paint costs you'll never see on an M-series Mac.</li>
</ul>
<h3>Common box-shadow mistakes</h3>
<ul>
<li><strong>Pure black at 100% opacity.</strong> Real shadows are tinted and translucent. Use <code>rgba(17,24,39,.15)</code> or similar; pure black looks like a stage prop.</li>
<li><strong>Forgetting the unit on 0.</strong> <code>box-shadow: 0px 4px 12px black</code> is fine; <code>0 4px 12px black</code> is also valid (CSS lets you drop the unit on zero), but mixing styles in one codebase is messy.</li>
<li><strong>Using shadow for focus rings on inputs.</strong> Browsers expose <code>:focus-visible</code> and <code>outline</code>; users with custom OS contrast settings rely on outline. Replace it with a shadow only when you also re-add an accessible focus indicator.</li>
<li><strong>Animating <code>box-shadow</code> on every frame.</strong> Use opacity or transform-based hover effects.</li>
<li><strong>Inset shadow on a transparent element.</strong> Without a background color the shadow has nothing to paint over, so it appears to vanish.</li>
<li><strong>Forgetting that overflow:hidden clips the shadow.</strong> If a parent clips overflow, an outer box-shadow on a child gets cut off — the shadow paints outside the box.</li>
</ul>
<aside class="article-aside">
<strong>Authoritative references:</strong>
<ul>
<li><a href="https://drafts.csswg.org/css-backgrounds/#box-shadow" rel="noopener" target="_blank">CSS Backgrounds and Borders Module Level 3 — box-shadow spec</a></li>
<li><a href="https://m3.material.io/styles/elevation/applying-elevation" rel="noopener" target="_blank">Material 3 — applying elevation</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" rel="noopener" target="_blank">MDN — box-shadow reference</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow" rel="noopener" target="_blank">MDN — filter: drop-shadow() reference</a></li>
<li><a href="https://web.dev/articles/animations-guide" rel="noopener" target="_blank">web.dev — Animations performance guide</a></li>
</ul>
</aside>
</section>
<section class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-item"><div class="faq-q" onclick="toggleFaq(this)">What does each value in a CSS box-shadow mean?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div><div class="faq-a">The <strong>box-shadow</strong> property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional <code>inset</code> keyword. Positive <em>h-offset</em> moves the shadow to the right; positive <em>v-offset</em> moves it down. <strong>Blur</strong> softens the edge — a blur of 0 creates a hard-edged shadow, while larger values create a diffuse gradient. <strong>Spread</strong> grows or shrinks the whole shadow uniformly before blurring. The <strong>inset</strong> keyword paints the shadow inside the element instead of outside.</div></div>
<div class="faq-item"><div class="faq-q" onclick="toggleFaq(this)">Can I stack multiple box-shadows on one element?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div><div class="faq-a">Yes — separate each shadow with a comma inside a single <code>box-shadow</code> declaration. The first shadow renders on top of the next, so layer your sharp, close shadows first and softer, wider shadows after. Stacking is how designers achieve Material Design elevations (typically three layers: ambient, key, and contact), neumorphic surfaces (one light and one dark shadow from opposite directions), and realistic ambient lighting. This generator supports as many layers as you need — use the <strong>+ Add layer</strong> button to create a new one.</div></div>
<div class="faq-item"><div class="faq-q" onclick="toggleFaq(this)">What is the difference between inset and outer shadows?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div><div class="faq-a">An <strong>outer shadow</strong> (the default) paints outside the element's border, giving a sense of elevation above the page. An <strong>inset shadow</strong> paints inside the element, creating a recessed or pressed-in look. Inset shadows are commonly used for input fields, pressed button states, inner glows on cards, and simulating depth inside a container. You can mix inset and outer shadows on the same element by comma-separating them — for example, combining a soft outer shadow with a subtle inset highlight at the top edge creates a convincing "lifted" effect.</div></div>
<div class="faq-item"><div class="faq-q" onclick="toggleFaq(this)">Do box-shadows affect layout or performance?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div><div class="faq-a">Shadows do not affect layout — they are painted outside the box model and do not push neighboring elements. However, large blur radii or many stacked shadows can hurt paint performance, especially on mobile devices with weaker GPUs. For animated shadows, prefer the <code>will-change: box-shadow</code> hint, or animate a pseudo-element's opacity instead of the shadow property itself to keep the animation on the compositor thread. Avoid animating the blur radius on every frame.</div></div>
<div class="faq-item"><div class="faq-q" onclick="toggleFaq(this)">How do I make a soft, realistic shadow?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div><div class="faq-a">Realistic shadows use low opacity (rgba alpha between 0.08 and 0.2), a small vertical offset, and a generous blur. Try stacking two or three layers: a tight near shadow for contact with the surface, a medium blur for body depth, and a wide soft blur for ambient light. Avoid pure black — a slightly tinted dark color (for example <code>rgba(17, 24, 39, 0.15)</code>) reads as more natural because real-world shadows pick up ambient color tint. The <strong>Paper</strong> and <strong>Soft</strong> presets above demonstrate this layered approach.</div></div>
<div class="faq-item"><div class="faq-q" onclick="toggleFaq(this)">Does box-shadow follow border-radius?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></div><div class="faq-a">Yes. A box-shadow automatically traces the element's <code>border-radius</code>, so a rounded card gets a rounded shadow without any extra work. This is different from <code>filter: drop-shadow()</code>, which follows the actual painted shape including transparent PNG edges. Use <em>box-shadow</em> for rectangular and rounded-rectangular elements; use <em>drop-shadow</em> for irregular shapes, SVG icons, or elements with transparent cut-outs.</div></div>
</section>
<section class="related-section">
<h2>Related Tools</h2>
<div class="related-grid">
<a class="related-card" href="css-gradient"><div class="related-icon">🎨</div><div class="related-card-info"><div class="related-card-name">CSS Gradient Generator</div><div class="related-card-desc">Visual linear and radial gradients</div></div></a>
<a class="related-card" href="color-picker"><div class="related-icon">🎨</div><div class="related-card-info"><div class="related-card-name">Color Picker</div><div class="related-card-desc">HEX, RGB, HSL values</div></div></a>
<a class="related-card" href="hex-to-rgb"><div class="related-icon">🎨</div><div class="related-card-info"><div class="related-card-name">Hex to RGB</div><div class="related-card-desc">Convert hex colors to RGB</div></div></a>
</div>
</section>
<section class="all-tools-section" aria-label="Browse all FreeDevTool developer tools">
<h2>Browse all 50 free developer tools</h2>
<p class="atc-sub">All tools run in your browser, no signup required, nothing sent to a server.</p>
<div class="all-tools-grid">
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">b64</div>
<div class="atc-cat-title"><h3>Encoding & Conversion</h3><span class="atc-cat-count">11 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/base64-encoder">Base64 Encoder / Decoder</a></li>
<li><a href="/base64-image">Image to Base64</a></li>
<li><a href="/byte-converter">Byte Converter (KB / MB / GB)</a></li>
<li><a href="/case-converter">Case Converter</a></li>
<li><a href="/hex-to-rgb">Hex to RGB / HSL</a></li>
<li><a href="/html-entity">HTML Entity Encoder</a></li>
<li><a href="/json-to-csv">JSON to CSV Converter</a></li>
<li><a href="/px-to-rem">PX to REM Converter</a></li>
<li><a href="/string-escape">String Escape / Unescape</a></li>
<li><a href="/url-encoder">URL Encoder / Decoder</a></li>
<li><a href="/yaml-to-json">YAML to JSON Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">{ }</div>
<div class="atc-cat-title"><h3>Formatting & Generators</h3><span class="atc-cat-count">13 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/color-name">Color Name from Hex</a></li>
<li><a href="/color-picker">Color Palette Picker</a></li>
<li><a href="/css-box-shadow">CSS Box Shadow</a></li>
<li><a href="/css-gradient">CSS Gradient Generator</a></li>
<li><a href="/json-formatter">JSON Formatter / Validator</a></li>
<li><a href="/lorem-ipsum">Lorem Ipsum Generator</a></li>
<li><a href="/markdown-preview">Markdown Preview</a></li>
<li><a href="/password-generator">Password Generator</a></li>
<li><a href="/qr-generator">QR Code Generator</a></li>
<li><a href="/sql-formatter">SQL Formatter</a></li>
<li><a href="/uuid-generator">UUID Generator</a></li>
<li><a href="/word-to-markdown">Word to Markdown</a></li>
<li><a href="/xml-formatter">XML Formatter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">JS</div>
<div class="atc-cat-title"><h3>Minifiers & DevOps</h3><span class="atc-cat-count">6 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/chmod-calculator">chmod Calculator</a></li>
<li><a href="/cron-parser">Cron Expression Parser</a></li>
<li><a href="/css-minifier">CSS Minifier</a></li>
<li><a href="/html-minifier">HTML Minifier</a></li>
<li><a href="/js-minifier">JavaScript Minifier</a></li>
<li><a href="/http-status">HTTP Status Codes</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">#</div>
<div class="atc-cat-title"><h3>Security & Hashing</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/hash-generator">Hash Generator (MD5, SHA)</a></li>
<li><a href="/jwt-decoder">JWT Decoder</a></li>
<li><a href="/jwt-generator">JWT Generator</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">.*</div>
<div class="atc-cat-title"><h3>Code & Text</h3><span class="atc-cat-count">8 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/ai-token-counter">AI Token Counter</a></li>
<li><a href="/char-counter">Character & Word Counter</a></li>
<li><a href="/git-cheatsheet">Git Commands Cheatsheet</a></li>
<li><a href="/number-base">Number Base Converter</a></li>
<li><a href="/regex-explainer">Regex Explainer</a></li>
<li><a href="/regex-tester">Regex Tester</a></li>
<li><a href="/text-diff">Text Diff Checker</a></li>
<li><a href="/wcag-contrast">WCAG Contrast Checker</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">IP</div>
<div class="atc-cat-title"><h3>Network & APIs</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/dns-lookup">DNS Lookup</a></li>
<li><a href="/http-request-builder">HTTP Request Builder</a></li>
<li><a href="/ip-lookup">IP Address Lookup</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">⏱</div>
<div class="atc-cat-title"><h3>Time & Dates</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/relative-time">Relative Time Calculator</a></li>
<li><a href="/timestamp-diff">Timestamp Diff</a></li>
<li><a href="/unix-timestamp-converter">Unix Timestamp Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">SEO</div>
<div class="atc-cat-title"><h3>SEO & Meta</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/meta-tag-generator">Meta Tag Generator</a></li>
<li><a href="/og-preview">Open Graph Preview</a></li>
<li><a href="/slug-generator">URL Slug Generator</a></li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<div>© 2026 FreeDevTool. Built for developers, by developers.</div>
<div class="footer-links"><a href="/all-tools">All Tools</a><a href="/about">About</a><a href="/privacy">Privacy Policy</a><a href="/terms">Terms of Use</a></div>
</footer>
<script>
let layers=[
{x:0,y:8,blur:24,spread:0,color:'#111827',alpha:20,inset:false}
];
let active=0;
function hexToRgba(hex,alpha){
const h=hex.replace('#','');
const r=parseInt(h.substring(0,2),16);
const g=parseInt(h.substring(2,4),16);
const b=parseInt(h.substring(4,6),16);
return `rgba(${r}, ${g}, ${b}, ${(alpha/100).toFixed(2)})`;
}
function buildShadow(){
return layers.map(l=>{
const c=hexToRgba(l.color,l.alpha);
return `${l.inset?'inset ':''}${l.x}px ${l.y}px ${l.blur}px ${l.spread}px ${c}`;
}).join(', ');
}
function render(){
const s=buildShadow();
document.getElementById('shadow-preview').style.boxShadow=s;
document.getElementById('shadow-code').value='box-shadow: '+s+';';
renderTabs();
syncInputs();
}
function renderTabs(){
const wrap=document.getElementById('shadow-layers');
wrap.innerHTML='';
layers.forEach((l,i)=>{
const t=document.createElement('div');
t.className='shadow-layer-tab'+(i===active?' active':'');
t.textContent='Layer '+(i+1);
t.onclick=()=>{active=i;render();};
wrap.appendChild(t);
});
}
function syncInputs(){
const l=layers[active];
document.getElementById('sh-x').value=l.x;
document.getElementById('sh-x-v').textContent=l.x+'px';
document.getElementById('sh-y').value=l.y;
document.getElementById('sh-y-v').textContent=l.y+'px';
document.getElementById('sh-blur').value=l.blur;
document.getElementById('sh-blur-v').textContent=l.blur+'px';
document.getElementById('sh-spread').value=l.spread;
document.getElementById('sh-spread-v').textContent=l.spread+'px';
document.getElementById('sh-color').value=l.color;
document.getElementById('sh-color-hex').value=l.color;
document.getElementById('sh-inset').checked=l.inset;
document.getElementById('sh-alpha').value=l.alpha;
}
function bind(id,prop,suffix){
document.getElementById(id).addEventListener('input',e=>{
const v=prop==='inset'?e.target.checked:(prop==='color'?e.target.value:parseInt(e.target.value,10));
layers[active][prop]=v;
if(prop==='color')document.getElementById('sh-color-hex').value=v;
render();
});
}
bind('sh-x','x');bind('sh-y','y');bind('sh-blur','blur');bind('sh-spread','spread');bind('sh-color','color');bind('sh-inset','inset');bind('sh-alpha','alpha');
document.getElementById('sh-color-hex').addEventListener('input',e=>{
const v=e.target.value.trim();
if(/^#[0-9a-f]{6}$/i.test(v)){
layers[active].color=v;
document.getElementById('sh-color').value=v;
render();
}
});
function addLayer(){
layers.push({x:0,y:4,blur:12,spread:0,color:'#000000',alpha:15,inset:false});
active=layers.length-1;
render();
}
function removeLayer(){
if(layers.length<=1)return;
layers.splice(active,1);
active=Math.max(0,active-1);
render();
}
const presets={
material:[
{x:0,y:2,blur:4,spread:-1,color:'#000000',alpha:20,inset:false},
{x:0,y:4,blur:5,spread:0,color:'#000000',alpha:14,inset:false},
{x:0,y:1,blur:10,spread:0,color:'#000000',alpha:12,inset:false}
],
soft:[
{x:0,y:10,blur:30,spread:-5,color:'#111827',alpha:12,inset:false}
],
hard:[
{x:6,y:6,blur:0,spread:0,color:'#000000',alpha:100,inset:false}
],
neon:[
{x:0,y:0,blur:10,spread:0,color:'#00d084',alpha:80,inset:false},
{x:0,y:0,blur:30,spread:0,color:'#00d084',alpha:60,inset:false}
],
paper:[
{x:0,y:1,blur:2,spread:0,color:'#000000',alpha:10,inset:false},
{x:0,y:8,blur:24,spread:-4,color:'#000000',alpha:10,inset:false}
]
};
function applyPreset(name){
layers=JSON.parse(JSON.stringify(presets[name]));
active=0;
render();
}
function copyCss(){
const code=document.getElementById('shadow-code').value;
navigator.clipboard.writeText(code);
const t=document.getElementById('toast');t.style.opacity='1';setTimeout(()=>t.style.opacity='0',1500);
}
function resetAll(){
layers=[{x:0,y:8,blur:24,spread:0,color:'#111827',alpha:20,inset:false}];
active=0;
render();
}
render();
function toggleFaq(el){el.parentElement.classList.toggle('open');}
</script>
</body>
</html>