Build CSS box-shadow visually. Add layers, tweak values, copy the code.
The CSS box-shadow property adds shadow effects to elements. Its syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color. The offset controls the shadow's position, blur controls softness, and spread expands or contracts the shadow size. Adding the inset keyword creates an inner shadow.
Layered shadows create depth and realism that single shadows can't achieve. Modern UI design uses multiple subtle shadow layers — for example, a tight dark shadow for definition combined with a larger, softer shadow for elevation. This approach mimics how real-world light creates both umbra (sharp) and penumbra (soft) shadows.
Performance tip: box-shadow triggers a repaint but not a reflow, making it safe for hover effects and transitions. However, very large blur values (100px+) on many elements can impact scroll performance. For elements that animate frequently, consider using filter: drop-shadow() instead, as it can be GPU-accelerated in some browsers.
This tool in other languages:
Français:
Générateur de box-shadow CSS
Español:
Generador de box-shadow CSS
Deutsch:
CSS Box-Shadow Generator
Português:
Gerador de box-shadow CSS
日本語:
CSSボックスシャドウジェネレーター
中文:
CSS 阴影生成器
한국어:
CSS 박스 그림자 생성기
العربية:
مولد ظل CSS
Use the controls to adjust offset (X, Y), blur, spread, and color. The preview updates live. Need layered shadows for depth? Click + Add shadow layer. When it looks right, click Copy CSS to grab the box-shadow declaration.
X offset moves the shadow left/right (positive = right). Y offset moves it up/down (positive = down). Blur softens the edge — 0 is a sharp line, higher values blur more. Spread expands or shrinks the shadow before blurring (negative values shrink).
Real shadows have multiple softness layers. Start with one close, dark, slightly offset shadow (small blur), then add a second larger, lighter, more offset shadow with bigger blur. Use the layered preset or add 2-3 layers manually. Modern UI design relies on this technique.
An inset shadow appears inside the element rather than outside — like a pressed-in groove. Use inset shadows for input fields (subtle inner depth), pressed button states, or to create inner glow effects. Toggle the inset switch to convert any shadow.
Rendering algorithms vary slightly between browsers — blur intensity and shadow positioning can look a bit different. Also check if you're using old -webkit- prefixes (no longer needed) or if a parent has overflow: hidden, which clips shadows. For pixel-perfect consistency, test across browsers.