Comment creer box-shadow CSS : guide complet avec generateur
Apprenez la syntaxe box-shadow CSS, types dombres et astuces.
CSS box-shadow syntax
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
- offset-x/y: Horizontal/vertical displacement.
- blur-radius: How much shadow blurs. 0 = sharp edges.
- spread-radius: How much shadow expands/contracts.
- color: Use rgba() for transparency.
- inset: Optional. Inner shadow.
Create shadows visually with the NexTools box-shadow generator.
How to use the NexTools box-shadow generator
The NexTools visual generator:
Step 1: Adjust offset, blur, spread sliders.
Step 2: Pick shadow color with transparency.
Step 3: See real-time preview.
Step 4: Copy CSS with one click.
Add multiple shadows for advanced effects. Complement with the gradient generator.
Popular box-shadow examples ready to use
Subtle (material): box-shadow: 0 2px 4px rgba(0,0,0,0.1);
Medium (cards): box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
Heavy (high elevation): box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
Neon glow: box-shadow: 0 0 20px rgba(99,102,241,0.5);
Inset: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
Border shadow (no blur): box-shadow: 0 0 0 3px rgba(99,102,241,0.5);
Multiple shadows and advanced effects
CSS allows multiple shadows comma-separated. Google Material Design defines 5 elevation levels with 2-3 overlapping shadows each.
Neumorphism:
box-shadow: 8px 8px 16px #d9d9d9, -8px -8px 16px #ffffff;
Requires light gray background (#e0e0e0).
Combine with colors from the NexTools color converter.
box-shadow vs drop-shadow vs text-shadow
box-shadow: Rectangular shadow around box model. Doesn't follow content shape.
filter: drop-shadow(): Follows actual element shape including PNG transparency. Ideal for icons.
text-shadow: Text only.
When to use: Cards/buttons → box-shadow. PNG icons → drop-shadow. Text effects → text-shadow.
Performance: when shadows affect speed
Expensive shadows: High blur (50px+) on many elements, animated box-shadow (causes repaint), many shadowed elements in scroll.
Optimizations: Animate transform instead of box-shadow for hover. Use will-change: transform. Apply shadows only to visible elements (Intersection Observer).
Shadows in dark mode
Classic dark shadows on dark backgrounds are invisible.
Solutions: Increase opacity (0.3-0.5). Use colored shadows. Replace with subtle borders (1px solid rgba(255,255,255,0.1)).
CSS variables:
:root { --shadow: 0 4px 6px rgba(0,0,0,0.1); }
.dark { --shadow: 0 4px 6px rgba(0,0,0,0.4); }
Box-shadow in Tailwind CSS
Tailwind shadow utilities: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none.
Custom: shadow-[0_4px_20px_rgba(0,0,0,0.15)]
See also our CSS gradients guide.
Essayez cet outil :
Ouvrir l'outil→Questions fréquentes
Can I animate box-shadow with CSS
Yes, but not recommended for performance. Animate a pseudo-element's opacity instead, or use transform: translateY() to simulate elevation change.
What's the difference between box-shadow and drop-shadow
box-shadow is rectangular (box model). drop-shadow follows actual shape including transparency. Use drop-shadow for PNG icons, box-shadow for cards.
Can I add multiple shadows to one element
Yes. Comma-separate them. First shadow renders on top.
How do I make an inner shadow (inset)
Add 'inset' keyword: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); Shadow appears inside the element.
Do CSS shadows affect page performance
Minimally for normal use. High blur on many elements or animated shadows can cause jank. Optimize by animating transform instead.
How do I make shadows work in dark mode
Dark shadows on dark backgrounds are invisible. Options: increase opacity, use colored shadows, or replace with subtle borders. Use CSS variables for mode switching.