CSS Shadow Generator
Create beautiful CSS box shadows and text shadows with multiple layers. Adjust blur, spread, color, and opacity with live preview.
Soft Drop
2 shadows
Medium Drop
2 shadows
Large Drop
1 shadow
Inner Shadow
1 shadow
Pressed Button
1 shadow
Floating Card
2 shadows
Neon Glow
3 shadows
Neumorphism
2 shadows
.element {
transition: box-shadow 0.3s ease;
}
.element {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.element:hover {
box-shadow: 0px 8px 12px -2px rgba(0, 0, 0, 0.15);
}
.element:active {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
}Create an inner shadow effect
Frequently Asked Questions
box-shadow adds shadows to element boxes (containers, divs, images), while text-shadow adds shadows to text only. Box shadows support spread and inset properties, while text shadows don't. Both support blur, color, and offset.
For box shadows, enable the "Inset" option to create inner shadows that appear inside the element rather than outside. This is perfect for creating depth effects, pressed buttons, or input field styles. Text shadows cannot be inset.
Yes! Both box-shadow and text-shadow support multiple layers. Click 'Add Layer' to stack shadows for complex effects like glows, depth, or 3D appearances. Each layer can have different colors, blur, offset, and spread values.
The spread value (only available for box shadows) expands or contracts the shadow before blurring. Positive values make the shadow larger, negative values make it smaller. This is useful for creating precise shadow shapes and glows.
For a glow effect, use a box shadow with zero or small offset values (X: 0, Y: 0), high blur value (15-30px), positive spread (2-5px), and a bright color with some transparency. Add multiple layers for more intensity.
Popular presets include: Material Design shadows (subtle with small blur), neumorphism (soft, large blur with light/dark pairs), card elevation (bottom-heavy shadows), and text outlines (multiple thin shadows for contrast).
Related Tools
Enhance your workflow with these complementary design tools.
Create beautiful multi-layer CSS gradients with blend modes and live preview.
Try CSS Gradient GeneratorBuild CSS keyframe animations with easing functions and timing controls.
Try CSS Animation BuilderConvert images between formats with quality control and optimization.
Try Image Converter