Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.

Opscomplete powered by

Save money by migrating from AWS to our fully managed hosting in Germany.

• Trusted by over 100 customers
• Ready to use with Ruby, Node.js, PHP
• Proactive management by operations experts

Read more Show archive.org snapshot

Some advice:

• Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other elements to be redrawn, and so on.
• Consider using filter: drop-shadow() Show archive.org snapshot instead, which renders with hardware acceleration.

Also see

• Box-shadow v/s Drop-shadow Show archive.org snapshot
• Many box shadows will make your app unusable on smartphones and tablets
• Designing Beautiful Shadows in CSS Show archive.org snapshot