Last updated: March 2026
Box Shadow CSS: A Complete Guide
The CSS box-shadow property is the primary way to add depth, elevation, and visual weight to HTML elements. It is supported in all modern browsers and has been stable since CSS3. This visual editor removes the guesswork by letting you see your shadow changes in real time.
Shadow design has a huge impact on perceived quality. Subtle, well-crafted shadows signal polish and professionalism. Heavy, poorly tuned shadows make a design feel dated. The difference between good and great UI often comes down to shadow values.
Common Box Shadow Patterns
Card shadows: Most card designs use a soft shadow with no horizontal offset, a small vertical offset (2-8px), moderate blur (6-20px), and low opacity (8-15%). This creates a natural "floating above the page" effect without being distracting.
Button hover shadows: Adding or increasing a shadow on hover gives buttons a satisfying "lifting" feedback. Combine with a slight translateY transform for an even more tactile feel. Transition the shadow for smooth animation.
Focus ring shadows: Use box-shadow: 0 0 0 3px rgba(59,130,246,0.5) with zero blur and positive spread to create a focus ring that does not affect layout, unlike outline or border.
Optimizing Shadows for Performance
Box shadows are GPU-accelerated in modern browsers and rarely cause performance problems for static elements. However, animating box-shadow values directly triggers expensive repaints on every frame. A better approach is to place the shadow on a pseudo-element and animate its opacity instead.
If you have dozens of shadowed elements visible simultaneously, consider using filter: drop-shadow() for simpler shadows, or bake shadow assets into images for truly complex layouts. For most web applications, however, CSS box-shadow on a handful of cards and buttons is completely fine.
Frequently Asked Questions
How do I add a box shadow in CSS?
Use the box-shadow property on any element. The syntax is: box-shadow: h-offset v-offset blur spread color; For example: box-shadow: 0 4px 6px rgba(0,0,0,0.1); adds a subtle downward shadow. Use this visual editor to dial in the exact values you want without trial and error.
Can I use multiple box shadows?
Yes. Separate each shadow value with a comma. The browser renders them in order from top to bottom. Layering a tight, dark shadow with a soft, wide shadow creates realistic depth. This tool supports up to 5 layers with independent controls for each.
What is an inset box shadow?
Adding the inset keyword before the shadow values creates an inner shadow instead of an outer one. This is commonly used for pressed button states, input fields, and recessed containers. The shadow appears inside the element's border box.
How do I convert box-shadow to Tailwind CSS?
Tailwind uses the shadow-[...] arbitrary value syntax for custom shadows. This tool automatically generates the Tailwind class for you. For standard shadows, Tailwind also provides shadow-sm, shadow-md, shadow-lg, shadow-xl, and shadow-2xl utility classes.