Use the free CSS Box Shadow Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What Box Shadow Does
Box shadow draws a shadow behind an element, and that single effect carries a surprising amount of design meaning. A small soft shadow says “this card floats slightly above the page”. A large diffuse shadow says “this dialog is important and separate”. No shadow at all says “this is flat content”. Users read these cues instantly, which is why shadow is one of the first things designers adjust and one of the last things beginners understand.
A shadow has five numbers: horizontal offset, vertical offset, blur radius, spread radius, and color. Offsets move the shadow away from the element. Blur softens its edge. Spread grows or shrinks it. Color, combined with opacity, decides how heavy it feels. An optional inset keyword flips the shadow inside the element, turning it into an inner glow or a pressed-in look instead of a floating one.
How to Use the Tool
Drag the sliders and watch the preview box. X moves the shadow left and right, Y moves it up and down, blur softens it, and spread expands it beyond the box edges. Pick a color and set opacity: black at 30% is a safe default for light pages, while a tinted color, like a dark blue at low opacity, often looks more natural than pure black. Tick inset to see the shadow drawn inside the box.
When the shadow looks right, copy the CSS line. It is a single box-shadow value, so it drops into any stylesheet. The preview box is deliberately plain so you judge the shadow itself, not a decorated example that hides what the shadow is doing.
Offsets and Light Direction
Shadows imply a light source, and consistent light direction is what makes a page feel coherent. If one card’s shadow falls down and right while another’s falls up and left, the page feels subtly wrong even if nobody can say why. Pick one direction, usually down and slightly right, and use it everywhere. Positive Y values push the shadow downward, which matches light coming from above, the way we experience light in the real world.
Negative offsets have their uses. A negative Y lifts the shadow above the element, which suits a bottom-anchored bar or a tooltip pointing downward. A negative X mirrors the effect horizontally. These are exceptions, not defaults: use them when the element’s position demands it, and keep the rest of the page consistent.
Blur and Spread
Blur is the softness control. Zero blur gives a hard-edged shadow that looks like a solid offset copy of the box, which suits retro or brutalist styles but rarely suits cards. Small blur values like 4 to 8 pixels give a crisp, close shadow. Large values like 24 to 48 pixels give a soft, distant glow. As a rule, bigger blur pairs with lower opacity: a huge soft shadow at full opacity looks like fog, not elevation.
Spread is the size control, and it is often misunderstood. Positive spread makes the shadow larger than the box in every direction, which reads as a glow or a border-like halo. Negative spread shrinks it, so the shadow peeks out only slightly, which is useful for tight, subtle elevation on small elements. Most card shadows use zero spread and let blur do the softening.
Color and Opacity
Shadow color matters more than people expect. Pure black shadows look harsh on colored backgrounds and muddy on warm ones. A shadow tinted with the page’s dominant hue, at low opacity, blends in. On a blue-tinted page, a dark navy shadow at 15% opacity looks designed, while black at 30% looks stamped on. On dark pages, shadows barely show at all, so consider a lighter glow or a border instead.
Opacity and blur work together as the “weight” of a shadow. A design system usually defines two or three shadow levels: a light one for cards, a medium one for dropdowns, and a heavy one for modals. Keeping those levels consistent across a site is worth more than any single perfect shadow, because users learn what each level means.
Inset Shadows
Inset shadows draw inside the element’s border, which reverses the meaning: instead of floating above the page, the element looks pressed in or hollow. They suit input fields, where a slight inner shadow suggests a recessed area to type in, and pressed button states, where the shadow change on click gives tactile feedback. Inset shadows also create inner glows when combined with a light color, useful for highlighting a selected panel.
Performance and Mistakes
Box shadows are cheap for static elements but expensive when animated, because the browser repaints the shadow on every frame. If you animate a card’s elevation on hover, animate transform and opacity instead, or accept a small cost for one element at a time. Large blur values on many elements also add up, so keep shadows modest in long lists.
The common mistakes are easy to list: shadows on everything, which flattens the hierarchy they are meant to create; inconsistent directions, which breaks the implied light; and full-opacity black shadows, which look like borders gone wrong. Use shadows sparingly, keep the light consistent, and let most of the page stay flat so the elevated elements actually stand out.
Pingback: Generar Sombras CSS Gratis - Crea Box-Shadow con Vista Previa