CSS Shadow Generator
CSS Shadow Generator is a free box-shadow generator for building shadow CSS through a visual editor. Adjust offset (X and Y), blur, spread, color, and opacity with sliders to generate box-shadow and filter: drop-shadow() CSS in real time.
Output type
Shadow layer settings
- 1
Presets
CSS Code
.shadow {
box-shadow: 0px 10px 20px -4px rgba(15, 23, 42, 0.25);
}
All shadow generation runs in your browser, and nothing you enter is sent to a server.
Preview
Sample element
Related Tools
Color Picker
Pick colors from an image and get the HEX, RGB, or HSL code. Zoom in with the loupe for pixel-level accuracy and export your palette. Free, no signup.
- Design & Color
- Productivity
Color Palette Extractor
Extract dominant colors from images and build a palette with HEX/RGB/HSL, color shares and 4–12 colors. Export to CSS/SCSS/Tailwind/JSON — all in your browser.
- Extraction
- Design & Color
Color Palette Generator
Free color palette generator. Pick one base color to generate complementary, analogous, triadic, and other color schemes from color theory. Export as CSS variables, Tailwind, SCSS, or JSON. Runs entirely in your browser.
- Generator
- Design & Color
Color Code Converter
Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.
- Converter
- Design & Color
Contrast Checker
Check color contrast against WCAG 2.1 / 2.2 AA and AAA, with passing-color suggestions, color-blindness simulation, and APCA. Runs entirely in your browser.
- Checker
- Design & Color
- Accessibility
CSS Gradient Generator
Free CSS gradient generator for linear, radial, and conic gradients. Adjust colors, angle, and alpha, then copy as CSS, Tailwind, or SCSS. Runs in your browser.
- Generator
- Development
- Design & Color
About CSS Shadow Generator
CSS Shadow Generator is a free box-shadow generator for building shadow CSS through a visual editor. Adjust offset (X and Y), blur, spread, color, and opacity with sliders to generate box-shadow and filter: drop-shadow() CSS in real time.
You can stack multiple shadow layers, so anything from soft, subtle shadows to rich, layered depth is possible. Each layer can be switched to inset, and you can reorder layers by dragging. Colors accept HEX as well as pasted rgb() / hsl() values.
Use the Shadow layers / Neumorphism toggle at the top to switch between two independent modes, each with its own output. In Shadow layers mode, apply soft shadows, Material-style elevation, floating, hard shadows, long shadows, and glow presets with one click. In Neumorphism mode, set a base color and adjust the distance and intensity to generate neumorphic (soft UI) shadows in real time. Change the preview background, element color, and shape (rounded, circle, square) to see exactly how the shadow looks while you tweak it.
Copy the result as CSS (box-shadow / filter), CSS variables, a Tailwind config, or SCSS variables in one click, then paste it straight into your code. Click "Copy URL" to get a shareable link that reproduces your current setup—handy for sharing with your team or bookmarking. All shadow generation runs locally in your browser, and nothing you enter is sent to a server. Runs entirely in your browser.
How to use
- Choose the output type (box-shadow or drop-shadow). box-shadow supports spread and inset, while drop-shadow follows the actual shape of the element.
- Add a layer and adjust the X/Y position, blur, spread, color, and opacity with the sliders. Drag layers to reorder them, and toggle inset for inner shadows.
- In Shadow layers mode, apply a preset (soft, Material, floating, hard, long shadow, glow) with one click. For neumorphic depth, switch to Neumorphism mode and adjust the base color, distance, and intensity to generate the shadow in real time. Change the preview background, element color, and shape to check the result.
- Switch between the CSS, CSS variables, Tailwind, and SCSS tabs under "CSS Code," then use "Copy CSS Code" to grab the code and paste it into your project. Use "Copy URL" to share your setup.
Use cases
- Designers and coders who want soft shadows on buttons, cards, or modals and need ready-to-paste box-shadow CSS in seconds.
- Front-end engineers building rich, layered depth or inner shadows by combining multiple layers and inset.
- Anyone who wants to generate neumorphism (neumorphic UI) shadows quickly from a base color.
- Developers who want to drop shadows straight into code as a Tailwind boxShadow config, CSS variables, or SCSS variables.
- Anyone who wants to hand a finished shadow to their team via a share URL or reproduce the same setup later.
Notes
- All shadow generation runs in your browser, and nothing you enter is sent anywhere.
- drop-shadow (`filter: drop-shadow()`) does not support spread or inset. Those apply only when box-shadow is selected.
- Stacking multiple drop-shadows applies each shadow on top of the previous result, which looks different from comma-separated box-shadow.
- The share URL includes the output type, each layer (position, blur, spread, color, opacity, inset), and the preview settings. Opening the URL reproduces the same shadow.