CSS Shadow Generator
Generate CSS box-shadow and text-shadow
How to use CSS Shadow Generator
Generate CSS box-shadow and text-shadow with visual controls and live preview. Copy code instantly. Free online shadow generator.
What are CSS shadows used for?
Shadows add depth, elevation, and visual hierarchy to interfaces. Material Design, Apple's Human Interface Guidelines, and most modern design systems use shadows systematically to convey which elements are closer to the user.
- Card elevation: A subtle shadow on a card component lifts it from the background, signaling it is an interactive or distinct content unit. Deeper shadows indicate higher elevation — like floating action buttons in Material Design.
- Modal and dropdown shadows: Overlays (modals, dropdown menus, tooltips) use strong shadows to indicate they float above the page content.
- Focus indicators: Box shadows can replace outlines for focus states:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)creates a visible focus ring without affecting layout. - Text readability: A subtle text-shadow on white text over an image ensures readability regardless of the image content behind the text.
- Neumorphism: The neumorphic design style uses dual shadows — a light shadow on one side and a dark shadow on the other — to create an extruded or inset 3D effect.
Box-shadow syntax: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Multiple shadows can be layered: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05)
Frequently Asked Questions
What is the difference between box-shadow and drop-shadow()?
box-shadow applies to the element's rectangular box — it does not follow irregular shapes like PNG images with transparent backgrounds. The CSS filter drop-shadow() function follows the actual rendered shape, including transparent areas. Use drop-shadow() for icons and images with transparency; box-shadow for rectangular elements.
What does the 'inset' keyword do?
The inset keyword makes the shadow appear inside the element instead of outside. An inset shadow creates the appearance of a recessed or pressed element — useful for pressed button states, input fields (inner depth effect), or neumorphic inset UI elements.
What is the spread radius in box-shadow?
The fourth value in box-shadow is the spread radius — it expands or contracts the shadow. A positive value makes the shadow larger than the element; negative makes it smaller. Setting offset-x and offset-y to 0 with a positive spread creates a uniform outline/glow effect around the element.
Why does my shadow look different in Safari vs Chrome?
Shadow rendering differences between browsers are usually due to sub-pixel rendering and gamma correction. Safari and Chrome use slightly different compositing algorithms. For consistent results across browsers, use RGBA colors with explicit alpha values rather than opacity, and test shadows on both rendering engines.
How many box-shadows can I stack?
There is no strict limit — you can layer multiple box-shadows with a comma-separated list. Each shadow is rendered in order from front to back. Multiple layered shadows with different blur radii and opacities create more natural-looking shadows that mimic real-world lighting. Design systems like Material Design define specific multi-layer shadow recipes for each elevation level.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow adds a shadow outside (or inside with inset) the box — does not affect layout. outline draws a line outside the border — also does not affect layout, commonly used for focus indicators. border adds a line inside the element — affects layout (increases box size unless using box-sizing:border-box). filter: drop-shadow() follows the element's actual rendered shape. For UI elevation and depth: box-shadow. For focus rings: outline or box-shadow. For icon shadows: drop-shadow().