Box-Shadow & Gradient Generator
Adjust sliders to build a CSS box-shadow and gradient, with a live preview and ready-to-copy code.
Instead of guessing box-shadow offset and blur values, drag the sliders for X/Y offset, blur, spread and colour and watch a live preview update in real time. Both output clean, copy-ready CSS you can paste straight into your stylesheet.
Why box-shadow values are hard to guess by just writing numbers
The box-shadow property packs four numeric values (horizontal offset, vertical offset, blur radius, spread radius) plus a colour into one declaration, and their combined visual effect isn't intuitive from the numbers alone — a blur of 20px looks very different depending on the offset values it's paired with. Adjusting sliders and watching a live preview update removes the guesswork of mentally simulating what a specific numeric combination will actually look like.
What each of the four shadow values controls, precisely
Horizontal (X) and vertical (Y) offset shift the shadow's position relative to the element itself, with positive Y commonly used to create a shadow that reads visually as 'below and slightly forward'; blur radius softens the shadow's edge into a gradient rather than a hard line; and spread radius expands or contracts the shadow's size uniformly in all directions before blur is applied on top of that expanded or contracted shape.
How gradients solve a different but related design problem
While box-shadow adds depth around an element's edges, a linear gradient smoothly blends between colours across a background itself, commonly used for buttons, hero banners, and card backgrounds that want visual interest beyond a single flat colour. Both tools share the same underlying idea of translating a visual intention into precise CSS syntax without needing to memorise exact property formats.
How to use it
- Drag the X, Y, blur and spread sliders to shape the shadow.
- Pick a shadow colour.
- Copy the generated box-shadow CSS.
- Do the same with the gradient colours and angle for the gradient CSS.
Common ways people use this tool
Adding depth to a card or button component
Build a subtle drop shadow for a UI card or button to give it a sense of elevation above the background.
Creating a gradient background for a hero section
Design a two-colour gradient for a banner or hero section background using visual sliders instead of guessing hex values and angles.
Matching a shadow style seen in a design mockup
Recreate a specific shadow look from a Figma or Sketch design file by adjusting sliders until the preview visually matches.
Tips for getting the best results
- Start with a small blur and moderate offset for a subtle, realistic shadow — very large blur values can look more like a glow than a shadow.
- Use a semi-transparent shadow colour (rather than solid black) for a softer, more natural-looking effect on light backgrounds.
- For elevated card designs, keep the Y offset positive and modest, mimicking how light and shadow behave in the real world.
- Combine a subtle shadow with a subtle gradient background for a more polished, layered visual effect on key UI elements.
Frequently asked questions
What do X and Y offset control?
X moves the shadow left/right and Y moves it up/down relative to the element — positive Y typically creates a shadow that reads as 'below' the element.
What's the difference between blur and spread?
Blur softens the shadow's edges, while spread expands or shrinks the shadow's size before blurring is applied.
Can I use multiple box-shadows on one element?
Yes, CSS supports comma-separating multiple shadow values, though this tool generates one shadow at a time — you can combine outputs manually.
Why does my shadow look too harsh or cartoonish?
A high-opacity, solid-colour shadow with low blur tends to look artificial — reducing the colour's opacity and increasing blur slightly usually produces a more natural, subtle result.
Does box-shadow affect an element's actual layout size?
No, box-shadow is purely visual and doesn't take up layout space the way a border or margin would — it can visually overlap neighbouring elements without pushing them.
Can gradients use more than two colours?
This tool focuses on simple two-colour linear gradients; CSS itself supports multi-colour gradients, though building one with precise colour stops usually benefits from a more advanced dedicated gradient tool.
Is there a performance cost to using lots of box-shadows on a page?
Generally negligible for reasonable use, though extremely large numbers of heavily blurred shadows on many elements simultaneously (like in a long scrolling list) could have a minor rendering performance impact on lower-powered devices.
Can I animate a box-shadow smoothly with CSS transitions?
Yes, box-shadow values can be transitioned like most other CSS properties, commonly used for a subtle 'lift' effect where a shadow grows slightly on hover.
Do gradients work the same way across all modern browsers?
Yes, linear gradients are well-supported across all current major browsers using standard CSS syntax, though very old browser versions may need vendor-prefixed alternatives that most modern projects no longer need to worry about.
Can I use a box-shadow to create an inset (inner) shadow instead of an outer one?
Standard CSS box-shadow supports an 'inset' keyword for exactly that effect; this generator currently builds outer shadows, so adding 'inset' manually to the generated CSS would achieve an inner shadow look instead.