Designing Depth with CSS Shadows
What this generator does
CSS shadows come in two flavours. box-shadow draws a shadow around the rectangular frame of an element — a div, button, or card — while text-shadow paints a shadow behind the individual glyphs of text. This generator gives both a visual editor: you drag sliders for horizontal and vertical offset, blur radius, spread, colour, and opacity, and the preview redraws the moment a value changes. When the result looks right, the matching CSS is written out for you to copy.
Instead of guessing pixel values by hand, you shape the shadow on a live box, button, card, or heading and read the exact box-shadow or text-shadow declaration back.
When to use it
Reach for box-shadow when an element needs to feel lifted off the page — Material-style elevation on cards, a soft floating menu, or the pressed look of a toggle. text-shadow is the tool for typography: a faint drop shadow that lifts a headline off a busy background, or a coloured glow behind a logo word.
It is also a fast way to match an existing design. Load a preset such as Material, Raised, Floating, or Glow as a starting point, then nudge the offsets and opacity until the shadow lines up with the mock-up you are building against.
Example: a layered box-shadow
A single shadow reads as box-shadow: 0 4px 6px rgba(0,0,0,0.1); — no horizontal offset, 4px down, 6px of blur, and a light translucent black. To sell real depth, stack two: a tight, dark shadow close to the element plus a wider, softer one further out. Add a layer and the tool joins them with a comma: box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. Each layer keeps its own offsets, blur, spread, and colour.
Notes and edge cases
Offset X and Y move the shadow right and down (negative values go left and up), blur softens the edge, and spread grows or shrinks the shadow before the blur is applied — a property text-shadow does not support. Turning on Inset flips the shadow inward, which is what gives pressed buttons and carved input fields their look. Keep text shadows light; heavy blur or high opacity behind letters hurts readability. When you are happy, copy the CSS in one click or download it to drop straight into your stylesheet.