CSS Shadow Generator
Visually design box-shadow and text-shadow effects with sliders and a live preview. Adjust horizontal/vertical offset, blur, spread, colour, and opacity — then copy the ready-to-use CSS code.
Box Shadow
H Offset4px
V Offset4px
Blur12px
Spread0px
ColourOpacity:0.2
Inset
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.2);
Text Shadow
H Offset2px
V Offset2px
Blur4px
ColourOpacity:0.4
AnyText
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
How to Use the CSS Shadow Generator
- Box Shadow: Drag the sliders for H/V offset, blur, and spread. Pick a colour and opacity. Check "Inset" for an inner shadow.
- Text Shadow: Adjust the sliders in the Text Shadow section for the same properties (no spread or inset for text-shadow).
- Live preview updates instantly as you drag. Click "Copy CSS" to copy the generated code.
Features
- Visual sliders for offset, blur, spread, colour, and opacity
- Live preview on a checkerboard background for contrast
- Inset shadow option for box-shadow
- Generates RGBA colour for precise opacity control
- One-click CSS code copy for both box and text shadow
- Separate controls for box-shadow and text-shadow
Css shadow generator: practical uses
Use css shadow generator when you need a fast, clear, private result without creating an account. This page also supports related needs like css shadow generator online, css shadow generator validator, css shadow generator formatter so you can choose the right workflow.
When it helps
- Best for: Pasting code, structured data, tokens, hashes, or encoded text and getting a readable result quickly.
- Helpful details: Use the examples, validation messages, copy actions, and formatting options to catch mistakes before you ship.
- Next step: Open a related formatter, validator, encoder, parser, or converter when your workflow moves to another format.
For the next step, try JSON Formatter & Validator, Regex Tester & Log Extractor, Base64 Encoder & Decoder, Hash Generator.
Frequently Asked Questions
What is the "Spread" value in box-shadow?
Spread expands or contracts the shadow beyond the blur radius. A positive spread makes the shadow larger than the element; a negative spread makes it smaller and tighter, creating a more realistic depth effect.
What does "Inset" do?
When checked, the box-shadow is rendered inside the element rather than outside. This creates a pressed-in or embossed look, commonly used for sunken input fields or pressed buttons.
Can text-shadow use spread or inset?
No. The CSS text-shadow property only accepts horizontal offset, vertical offset, and blur radius. Spread and inset are only valid for box-shadow.
