Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Tool Panel
About Box Shadow Generator
Offset, blur, spread and colour with a live preview, plus an optional inset shadow. The output is a standard box-shadow declaration.
- 1
Each parameter does one thing: X and Y place the shadow, blur softens its edge, spread scales the shape before the blur is applied, and the colour sets the tint.
- 2
Spread can go negative to pull the shadow in tight against the element, and a negative Y drops it above instead of below.
- 3
The colour carries alpha by default (#0f172a40 is 25% opacity) and the swatch only edits the RGB part, keeping the alpha — so recolouring never turns a soft shadow solid.
- 1
Drag the four sliders
Pick a direction first, then shape it with blur and spread; each value is shown next to its label.
- 2
Set the colour and inset
Inset draws the shadow inside the element (recessed panels, input wells). The swatch edits RGB and keeps the existing alpha.
- 3
Copy the CSS
The output is one `box-shadow` line, ready for a stylesheet.
Blur softens the edge, fading both inward and outward. Spread first enlarges (positive) or shrinks (negative) the shadow shape, and the blur is applied afterwards. A large blur with negative spread gives a wide soft glow, while a small blur with positive spread keeps a crisp edge.
This tool emits one at a time. CSS itself accepts a comma-separated list, `box-shadow: a, b`, where the order is the paint order — the first entry sits on top. Combine two outputs to get the usual layered look: one tight shadow close in and one wide shadow further out.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools