CSS Box Shadow Generator — Layered Shadows, Neumorphism & Text Shadow
Design layered box-shadow and text-shadow effects with live preview, presets for elevation, neumorphism and glow, and copy the CSS.
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
Runs entirely in your browser. Nothing you enter is sent to us or stored. Browse all free tools.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This free CSS box shadow generator lets you design shadows by eye and copy the exact box-shadow or text-shadow CSS. Stack as many layers as you need, each with its own horizontal and vertical offset, blur, spread, colour, opacity and inset setting, and watch them on a preview card whose background, colour and corner radius you can change to match your design.
Realistic shadows are almost never a single layer. A sharp, close shadow and a large, faint one together read as an object lifted off the page, which is how Material Design's elevation levels work, and neumorphism needs two opposing shadows on a card the same colour as its background. The presets cover these patterns, and the notes below explain the box-shadow syntax, why layering looks better, and what shadows cost in rendering performance.
How to use
- Choose Box shadow or Text shadow.
- Start from a preset, or adjust the selected layer with the sliders: offsets, blur, spread, colour, opacity and inset.
- Add more layers with + Add layer (it copies the selected one), select a layer in the list to edit it, and reorder with the arrows. The first layer is drawn on top.
- Match the preview to your design: set the page background, card colour and corner radius.
- Copy the CSS, or the Tailwind arbitrary-value class.
Frequently asked questions
What do the box-shadow values mean?
box-shadow: inset? x-offset y-offset blur spread colour. The x offset moves the shadow right (negative: left), the y offset moves it down (negative: up). Blur is how soft the edge is; 0 gives a hard edge. Spread grows the shadow before blurring (negative shrinks it, which is how you keep a large blur from showing at the sides). Inset draws the shadow inside the element instead of outside. Multiple shadows are separated by commas, and the first is painted on top.
How do I make a soft, realistic shadow?
Layer two or more shadows with low opacity rather than one dark one: a small, tight shadow for the contact edge (0 1px 2px at about 10 percent black) and a larger, softer one for ambient light (0 8px 24px at 8 to 12 percent). Use a slightly negative spread on the large one so it stays under the element. Tinting the shadow with a dark version of the background colour, rather than pure black, also looks more natural on coloured pages.
How do I create a neumorphism effect?
Give the element the same background colour as its parent, then add two shadows: a darker one offset down and right, and a lighter (often white) one offset up and left, for example 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) on #e0e5ec. Make them inset for a pressed state. Be careful with it for controls: neumorphic buttons have very low contrast against their background and usually fail the WCAG 3:1 requirement for UI components unless you add a border or a stronger outline.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element's rectangular box, including its border-radius, and supports spread and inset. filter: drop-shadow() follows the visible pixels, so it traces the outline of a transparent PNG, an SVG icon or a clipped shape, but has no spread or inset and accepts only one shadow per function. Use box-shadow for cards and buttons, drop-shadow for irregular images and icons.
Can text-shadow have spread or inset?
No. text-shadow takes only x offset, y offset, blur and colour. To fake an outline, stack four or more hard shadows offset by 1px in each direction (the Outline preset), or use -webkit-text-stroke, which is now widely supported. A soft, low-opacity text shadow can improve legibility of white text over photos, but it does not count towards WCAG contrast.
Do box shadows hurt performance?
Static shadows are cheap. Large blur radii become costly when they are repainted every frame, for example when animating box-shadow on hover across many cards. The standard trick is to put the shadow on a pseudo-element and animate its opacity instead, which the browser can composite on the GPU without repainting the blur.
Elevation: a consistent shadow scale
Design systems define a handful of elevation levels and use only those, so that 'how high' an element sits means something: cards at level 1, dropdowns at 2 or 3, dialogs at 4 or 5. The Elevation presets here follow that pattern, each pairing a tight shadow with a broader one, both growing with height.
• Level 1, resting cards and list items: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
• Level 2, raised cards and hovered items: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12).
• Level 3, dropdowns and popovers: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1).
• Levels 4 and 5, modals and dialogs: larger offsets and blurs, still under 20 percent opacity.
Store the levels as CSS custom properties (--shadow-1 to --shadow-5) or in your Tailwind theme rather than pasting values into components, so the scale can be tuned in one place.
Shadows in dark mode
A black shadow on a near-black background is invisible, so dark interfaces show elevation differently: higher surfaces get slightly lighter background colours, and shadows, if kept, become larger and more opaque. A subtle 1px light border or an inner highlight (inset 0 1px 0 rgba(255,255,255,0.06)) often reads better than any outer shadow. Glows, such as the Glow preset, work on dark backgrounds because they add light rather than remove it; keep them for focus states and highlights, not every card.
Related free tools
- CSS Gradient Generator — Build linear, radial and conic gradients with draggable colour stops, an angle dial and presets. Copy the CSS or a Tailwind class.
- Color Palette Generator — Press the spacebar for a new palette, lock the colours you like, pick a harmony, or pull the palette out of a photo. Export to CSS, Tailwind, SCSS, JSON or PNG.
- Contrast Checker — Check text and background colours against WCAG 2.x AA and AAA, see the APCA Lc value, and get the nearest colour that passes.
- Color Picker & Converter — Pick any color from anywhere on your screen, or convert instantly between HEX, RGB, and HSL.