◈Free
CSS shadow generator
Generate box or text shadows from validated numeric controls.
Generate box or text shadows from validated numeric controls. Set horizontal and vertical offsets, blur, color and opacity to produce a CSS shadow declaration. Choose box or text mode for the corresponding property name.
How to use
- Enter your text, values, or image.
- Adjust the options and run the tool.
- Copy or download your result.
Worked example
Example input
Horizontal px: 0 Vertical px: 4 Blur px: 12 Color: #000000 Opacity %: 20 Shadow type: box
Example result
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
Limitations and details
This creates one shadow without spread or inset options; actual appearance depends on the element and surrounding layout.
Inputs and options
- Horizontal px
- Number · Minimum: -1000 · Maximum: 1000
- Vertical px
- Number · Minimum: -1000 · Maximum: 1000
- Blur px
- Number · Minimum: 0 · Maximum: 1000
- Color
- Text
- Opacity %
- Number · Minimum: 0 · Maximum: 100
- Shadow type
- Box / Text
Frequently asked questions
Is this tool free and private?
Yes. All 300 tools are free in this phase. Processing happens in your browser; your input and files are not sent to our servers.