100% free · Runs 100% in your browser · No signup needed
Try an example: soft card shadow
Syntax: box-shadow: offset-x offset-y blur-radius spread-radius color inset; — the inset keyword flips the shadow inside the box. Multiple shadows can be comma-separated.
The CSS box-shadow property adds shadow effects around an element's frame, and it is one of the fastest ways to give a flat design a sense of depth. The full syntax reads: box-shadow: offset-x offset-y blur-radius spread-radius color inset?; Each value controls a different aspect of the shadow. The horizontal and vertical offsets position it, the blur radius softens its edges, the spread radius expands or contracts its size, and the color sets its tone. Add the optional inset keyword at the end and the shadow flips from outside the box to inside it, creating a pressed-in or inner-glow effect.
Shadows can also be layered: multiple shadows are simply written as a comma-separated list, with each shadow rendered on top of the previous one. That technique powers everything from realistic material-design elevation to glowing neon buttons. Writing these values by hand means constant guess-and-refresh cycles in the browser. Our free Box-Shadow Generator removes the guesswork entirely — drag sliders, pick colors, toggle inset, watch a live preview box update in real time, and copy the finished CSS snippet straight into your stylesheet.
Understanding each value makes the sliders intuitive. The offset-x value moves the shadow horizontally: positive numbers push it right, negative numbers push it left. The offset-y value moves it vertically: positive goes down, negative goes up. A classic drop shadow uses a small positive offset on both axes, like 4px 4px, so the light appears to come from the top-left. Setting both offsets to zero centers the shadow directly behind the element, which is the starting point for glows and outer rings.
The blur-radius controls softness. A value of 0 produces a razor-sharp shadow with hard edges, while larger values like 20px or 40px diffuse the shadow into a soft haze. The spread-radius then scales the shadow's size: positive spread makes it bigger than the element, negative spread shrinks it. Combining a large blur with a negative spread creates the soft, tight shadows popular in modern card designs. Finally, color accepts any CSS color, and adding opacity through an RGBA value lets the background show through — almost every professional shadow uses some transparency, because pure black shadows look harsh and artificial.
By default, box-shadow renders outside the element's border box — an outset shadow. Add the inset keyword and the shadow is drawn inside the element instead. Inset shadows create pressed-button effects, inner borders, and subtle vignettes within cards and inputs. A common pattern is pairing an inset shadow on the top edge with a light outset shadow beneath, which mimics how real objects catch light. The generator's inset toggle lets you flip between the two instantly, so you can compare the same values in both modes and pick the one that fits your design.
The control panel gives you a slider for each numeric value: horizontal offset, vertical offset, blur radius, and spread radius. A color picker sets the shadow color, with an opacity slider that converts it to a translucent RGBA value automatically — no manual alpha math required. The inset toggle switches the shadow inside or outside with one click. Every change updates the live preview box immediately, so what you see is exactly what your CSS will produce.
When the shadow looks right, hit the copy button to grab the CSS snippet. The output is clean, production-ready code you can paste into any stylesheet. Experiment freely: try a soft 0 8px 24px shadow with 20 percent black opacity for elegant cards, or a 0 0 16px glow in your brand color for call-to-action buttons. If you are designing buttons, shadows pair beautifully with gradients — our CSS Gradient Generator creates the backgrounds while this tool handles the depth, and our CSS Button Generator combines both into complete button styles.
Launching a portfolio, agency site, or online store with a polished custom design? It deserves hosting that looks as professional as it does. FistHost's shared hosting plans start at just $0.99/month with fast servers that keep your beautifully styled pages loading instantly. Choose the annual plan and you will also get a FREE domain name, so your brand owns its address from the very first visitor.
One shadow is rarely the end of the story. Layering two or three shadows creates effects a single shadow cannot: a tight dark shadow for definition plus a wide soft one for atmosphere gives cards a photographic quality, while a colored glow beneath a crisp offset shadow makes buttons feel electric. Because the syntax is comma-separated, you can stack as many as you like — just remember that the first shadow in the list paints on top. Neumorphism, the soft-UI trend, is simply two shadows: one light shadow offset up-left and one dark shadow offset down-right, both with generous blur. Glassmorphism pairs a faint border with a single soft shadow to lift frosted panels off the background. Build the shadow here, then combine it with other effects from our CSS toolkit to complete the look.
Box-shadow is supported in every modern browser and has been for over a decade, so the code this tool generates works everywhere without prefixes or fallbacks. Performance is excellent for static shadows, but keep two things in mind: animating box-shadow forces the browser to repaint on every frame, which can stutter on low-end devices — prefer animating transform and opacity for motion, and reserve shadow changes for hover states. Second, very large blur radii on huge elements cost more to render, so test on real mobile hardware if your design leans heavily on giant soft shadows. Used wisely, box-shadow is one of the cheapest visual upgrades in all of CSS.
Great design deserves a great home on the web. FistHost gives every hosting plan free SSL, so your polished site always loads over secure HTTPS, plus one-click installs when you are ready to add a blog or store alongside your custom pages. At just $0.99/month for shared hosting, FistHost is the affordable foundation your designs deserve — fast, secure, and always online.
Offset-x, offset-y, blur-radius, spread-radius, color, and the optional inset keyword last. Blur and spread are optional, and lengths cannot be negative except for spread, which accepts negative values to shrink the shadow.
Use a negative spread radius to pull the shadow back so it only peeks out on the offset side, or pair offsets with clipping via overflow hidden on a wrapper. The generator's live preview makes it easy to dial this in visually.
Yes, transitions on box-shadow work in all modern browsers and are great for hover effects. For continuous animations, prefer transform and opacity for smoother performance.
Almost always because the color is fully opaque black. Lower the opacity to 15 to 25 percent and increase the blur — the preview box will show the difference immediately.
No reviews yet. Be the first to review this tool!
Reviews are protected by captcha and moderated before they appear.