1---
2title: Animate Shadows via Pseudo-Element Opacity
3impact: MEDIUM
4tags: visual, shadow, animation, performance
5---
6 
7## Animate Shadows via Pseudo-Element Opacity
8 
9Transitioning box-shadow directly forces expensive repaints. Instead, put the target shadow on a pseudo-element and animate its opacity.
10 
11**Incorrect (animating box-shadow):**
12 
13```css
14.card {
15  box-shadow: var(--shadow-1);
16  transition: box-shadow 0.2s ease;
17}
18 
19.card:hover {
20  box-shadow: var(--shadow-3);
21}
22```
23 
24**Correct (pseudo-element opacity):**
25 
26```css
27.card {
28  position: relative;
29  box-shadow: var(--shadow-1);
30}
31 
32.card::after {
33  content: "";
34  position: absolute;
35  inset: 0;
36  border-radius: inherit;
37  box-shadow: var(--shadow-3);
38  opacity: 0;
39  transition: opacity 0.2s ease;
40  pointer-events: none;
41  z-index: -1;
42}
43 
44.card:hover::after {
45  opacity: 1;
46}
47```
48 
49Reference: [Designing Beautiful Shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/)
50