Create and preview CSS box shadows visually
The box-shadow property draws a shadow around an element's box. It takes up to four length values plus a color, and once you know what each position means you can read and write shadows without guessing. This generator gives you a live preview and the exact CSS to copy.
The syntax is horizontal offset, vertical offset, blur radius, spread radius, then color. The two offsets move the shadow right and down, and accept negative values to move it left and up. The blur radius softens the edge, where 0 gives a hard edge and larger values fade it out further. The spread radius grows or shrinks the whole shadow before blurring, so a negative spread pulls it in, which is useful for tight shadows that do not leak out the sides.
Adding the inset keyword draws the shadow inside the element instead of outside, which is how you get pressed buttons and inner glows. You can also list several shadows separated by commas, and they stack with the first one painted on top.
A shadow of 0 1px 3px rgba(0,0,0,0.12) gives a subtle lift suitable for a card at rest: no horizontal offset, pushed down a single pixel, softly blurred, and only 12 percent opaque. Compare that with 0 10px 40px rgba(0,0,0,0.25), which pushes further down with a much wider blur and reads as an element floating well above the page. The pattern to notice is that as the vertical offset grows, the blur should grow faster, because things further from a surface cast softer shadows.
A box shadow does not affect layout. It is painted outside the element's box and never pushes siblings around, which is the main practical difference from a border. Very large blur radii on many elements can cost paint performance, and animating the shadow values directly is expensive. If you need a hover lift, animating transform and cross-fading a second shadow is far smoother.
What is the difference between blur and spread? Blur softens the edge; spread changes the shadow's size before it is blurred.
How do I shadow the shape rather than the box? Use filter: drop-shadow(), which follows transparency, for example on a PNG or an SVG icon.
Can I have multiple shadows? Yes, comma-separate them. The first is drawn on top.
The box-shadow property attaches one or more shadows to an element. Each shadow is written as a short list of values in a fixed order: horizontal offset, vertical offset, blur radius, spread radius, and colour. A positive horizontal offset pushes the shadow to the right and a positive vertical offset pushes it down, so a soft drop shadow usually uses small positive offsets with a larger blur.
The generator above writes that string for you and previews it live, so you can drag the offset, blur, spread, and opacity controls until the result looks right and then copy the finished rule. Opacity is applied through an rgba colour, which is why the colour and opacity controls work together.
Adding the inset keyword draws the shadow inside the element instead of behind it, which is how you fake a pressed button or an inner glow. You can also apply several shadows at once by separating them with commas; the first one in the list sits on top. That is the trick behind layered, realistic depth: one tight dark shadow close to the element and a second wider, lighter one further out.
Very large blur values on many elements can cost paint performance on lower-end devices, so prefer a couple of well-chosen shadows over a dozen heavy ones. Shadows are decorative, so never rely on them alone to signal state; pair them with a colour or border change that does not depend on a visitor seeing the shadow.
Source: MDN Web Docs: box-shadow