CLR / 04 · Colour tools
Box shadow generator
Offset, blur, spread and colour, previewed on a real card as you tune it.
Box Shadow Generator
2 in the stack, on a real card
A card
The shadow below this card is the declaration above, applied to this element. Nothing is drawing an impression of it.
CSS
box-shadow: 0 10px 30px -6px rgb(0 0 0 / 45%), 0 4px 6px -4px rgb(0 0 0 / 30%);
Colours are given in hex, three or six digits, with opacity as its own slider. Lengths are in pixels, and a zero spread is left out because it says nothing.
Support Us 💚Help keep ToolZool free
Thanks to you,
ToolZool stays free
Powerful tools should be free for everyone. Here is how that is paid for — all of it, with nothing left off the list.
Buy Zooly a coffeeDirect support that keeps the lights on and new tools coming. Entirely optional.Support Zooly →
Recommended picksPaid tools that finish jobs a browser cannot. Nothing on that page earns us anything today.See recommendations →
Ads, kept respectfulLabelled placements sit outside the working area, so they never come between you and your result.Read the ad policy →
You are awesomeEvery visit, share and kind word helps ToolZool grow and reach more people.
