CSS Shadow Generator
Create stunning box shadows and text shadows with live preview — copy production-ready CSS instantly
Live Preview
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);Shadow Layers
Presets
Layer 1
Free CSS Shadow Generator — Create Box Shadows and Text Shadows Online
Shadows are one of the most powerful tools in web design. A well-placed shadow adds depth, creates visual hierarchy, and makes flat interfaces feel alive and clickable. But writing CSS shadow code by hand is tedious. Getting the offset, blur radius, spread radius, and colour exactly right takes multiple rounds of trial and error — especially when you're stacking multiple shadow layers. That's exactly what this CSS shadow generator is built for.
The OmniWebKit CSS Shadow Generator handles both box-shadow and text-shadow in one place. You adjust sliders, choose colours, and watch the live preview update in real time. When you're happy, copy the CSS or download it as a .css file. No signup. No limits.
Whether you're a beginner learning CSS or a senior developer who just wants to speed up your workflow, this tool gives you production-ready shadow code that's clean and cross-browser compatible. The generated CSS works in every modern browser including Chrome, Firefox, Safari, and Edge.
Understanding CSS box-shadow — All Five Parameters Explained
The CSS box-shadow property takes up to five values. Understanding each one is key to creating the exact shadow effect you're after.
offset-x-10px to 10pxMoves the shadow horizontally. A positive value pushes the shadow right. A negative value pushes it left. Zero centres it directly behind the element.
offset-y-10px to 10pxMoves the shadow vertically. A positive value pushes it down (the most natural-looking direction since light usually comes from above). Negative means upward.
blur-radius0 to 100pxControls how soft the shadow edges are. Zero means a hard, sharp edge — like a flat sticker. Higher values make the shadow softer and more diffuse. Most real-world designs use 8–25px.
spread-radius-20px to 20pxExpands or contracts the shadow before blur is applied. Negative spread with high blur creates a subtle depth effect. Positive spread makes the shadow larger than the element — great for glows.
colorrgba / hexThe shadow colour. Using rgba() lets you control opacity separately from the colour, which is the most flexible approach. Avoid solid black — most natural shadows use rgba(0,0,0,0.1) to rgba(0,0,0,0.3).
The inset keyword
Adding inset before the values turns a drop shadow into an inner shadow — the shadow appears inside the element instead of outside. This is great for pressed button states, embedded wells, or sunken input fields. Toggle the "Inset Shadow" switch per layer in the tool above.
Layering Multiple Shadows — The Secret to Professional UI Design
CSS allows multiple shadows on a single element by separating them with commas. This is where the real magic happens. A single shadow looks flat. Two or more shadows stacked together create the kind of depth that makes interfaces look genuinely polished.
Here's why layering works: in real life, shadows aren't uniformly blurred. An object casts a sharp, dark shadow close up and a soft, faint shadow further away. To replicate this in CSS, you layer a tight, more opaque shadow with a wide, barely-there ambient shadow.
Tailwind-style shadow-md equivalent
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
Large card with ambient light
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.20), 0 4px 8px -2px rgba(0,0,0,0.08);
Neon glow effect
box-shadow: 0 0 10px 2px rgba(59,130,246,0.7), 0 0 30px 5px rgba(59,130,246,0.3);
Neumorphism (soft UI)
box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;
CSS text-shadow — Adding Depth to Typography
Text shadows work slightly differently from box shadows. The syntax is text-shadow: offsetX offsetY blur color. There is no spread parameter, and no inset keyword. But you can still layer multiple shadows for dramatic typographic effects.
Subtle lift
Small offset, some blur, low opacity. Used for body text on coloured backgrounds to improve legibility.
Neon glow
Zero offset, large blur, vivid colour. Creates the glowing text effect popular in dark-mode designs and gaming UIs.
Hard outline
Four shadows at ±1px offset, zero blur. Creates a solid text outline using only CSS shadows — no -webkit-text-stroke needed.
Switch to the Text Shadow tab in the generator above. You'll find six presets including Soft, Hard, Neon, Retro, Emboss, and Outline — each demonstrating a different text shadow technique. Adjust the sliders to customize them, then copy the CSS.