Build CSS box-shadow and text-shadow styles with live preview. Adjust offset, blur radius, spread, colour and opacity. Apply presets with one click.
box-shadow-generator.tool
Presets
Preview
Preview
Generated CSS
box-shadow:
CSS Box Shadow Syntax
The box-shadow property accepts: horizontal offset, vertical offset, blur radius, spread radius, and colour. All values separated by spaces. Positive horizontal offset moves the shadow right; positive vertical offset moves it down. Blur radius softens the edge. Spread radius expands (positive) or contracts (negative) the shadow. The inset keyword makes it an inner shadow.
Layering Multiple Shadows
You can apply multiple box shadows to one element by separating them with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08);. Layered shadows produce more natural, realistic depth than a single shadow. This is the technique used by Material Design and most modern UI systems.
Frequently Asked Questions
Blur radius softens the shadow's edges — higher values create a more diffuse, softer shadow. Spread radius expands or contracts the shadow's size before blurring. A positive spread makes the shadow larger than the element; a negative spread creates a tight shadow smaller than the element. Spread has no effect on the blur itself.
Add the keyword 'inset' at the beginning of the box-shadow value: box-shadow: inset 0 2px 6px rgba(0,0,0,0.2). This creates an inner shadow that appears inside the element rather than outside it. Common uses: pressed button states, text input fields to show depth, and container inner shadows.
Text-shadow adds a shadow effect to text. Common uses: retro or vintage styling (3px offset with no blur), neon glow effects (large blur radius with high-saturation colour), legibility improvements on images (soft dark shadow under light text), and subtle depth in UI text. Unlike box-shadow, text-shadow has no spread parameter.
A combination of a subtle shadow and a slightly higher position on the z-axis creates an elevated card effect. A common approach: box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1). On hover, increase the shadow: 0 10px 20px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08). Add transition: box-shadow 0.2s for a smooth animation.
Box-shadow does not affect layout — other elements are not pushed aside by shadows. Performance-wise, box-shadow is painted on the GPU in modern browsers and is generally cheap to render. Very large blur radii on many elements can affect rendering performance on older devices, but for typical UI use it is not a concern.