Loona Box Shadow Generator — Visual CSS Shadow Designer
Shadows are the difference between flat and finished, and their numbers are impossible to guess. Slide until the preview card floats exactly right, then take the one line of CSS.
How to use the Box Shadow Generator
- Start from a preset (Soft, Hard, Floating) or from scratch.
- Tune the sliders: Y offset is shadow depth, blur is softness, spread grows or shrinks the shadow’s shape.
- Copy the box-shadow declaration into your stylesheet.
How it works
Opacity is folded into the colour as an 8-digit hex alpha (for example 18% ≈ 2e), so the output is a single standard box-shadow value that works everywhere — no rgba() juggling needed.
Worked example
A developer lifts a pricing card off the page with the Floating preset and negative spread — the shadow hugs the card instead of spraying sideways.
Frequently Asked Questions
What does spread do?
Positive spread expands the shadow beyond the box; negative spread shrinks it — the secret of tight, realistic contact shadows.
Inset vs regular?
Inset paints the shadow inside the box — for pressed, carved or inner-glow effects.
Why is opacity inside the colour?
An 8-digit hex (RRGGBBAA) is the modern, single-value way to include alpha; every current browser supports it.
Can I stack two shadows?
Design the main one here; add a second value after a comma in your CSS using the same pattern for layered depth.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).