Γεννήτρια CSS Box-Shadow

Build Any CSS Box-Shadow Visually — No Trial and Error

This free CSS box-shadow generator replaces tedious guesswork in your code editor with a live visual canvas. Adjust sliders for offset, blur, spread, and opacity — the shadow on the preview element updates in real time — and copy-ready CSS waits at the bottom in your choice of format. Nothing is uploaded, no account is needed, and every calculation runs locally in your browser.

Start from one of the eight built-in presets or from a blank layer. Add multiple shadow layers to build up realistic depth effects, toggle the dark/light background to check contrast, then choose your output format: full CSS property declaration, bare shadow value, or a React-ready camelCase inline style string. The generator covers everything from subtle card elevation to neumorphic extrusion to neon glow effects.

Understanding the Six Parameters of box-shadow

Offset X and Y position the shadow relative to the element — positive X moves it right, positive Y moves it down. Negative offsets move it left or up, useful for top-lit shadow effects. Blur radius controls edge softness: zero produces a hard, crisp outline; larger values create a gradual, diffuse fade that reads as natural depth. Spread radius expands or contracts the shadow before blur is applied — a negative spread with a large blur keeps the shadow within the element's natural footprint, the technique behind most realistic card shadows.

Color is typically a semi-transparent dark value like `rgba(0, 0, 0, 0.12)` for neutral elevation, or a vivid hue for glow effects. The opacity slider lets you fine-tune alpha independently of the colour picker. The Inset toggle reverses the shadow direction, drawing it inside the border box to create recessed wells, indented inputs, and push-button pressed states — capabilities that `filter: drop-shadow()` cannot replicate.

Multi-Layer Shadows for Professional, Realistic Depth

A single large shadow reads as artificial — it looks like a generic Photoshop drop-shadow filter rather than real light. Professional UI uses three to five stacked shadow layers where each roughly doubles the offset and blur while halving the opacity. This technique mimics how light physically scatters from a source and creates a shadow that reads as natural at any size or viewing distance.

This generator supports up to eight independent layers. Each layer has its own offset, blur, spread, color, opacity, and inset toggle. The eye icon on each layer lets you toggle visibility for instant before/after comparison without deleting the layer. The Deep preset shows a three-layer graduated stack; Floating uses two complementary layers to suggest the element is lifted above the page; Material reproduces Google Material Design's multi-layer elevation specification.

Presets: Card, Crisp, Neumorphic, Glow, and More

The Soft card preset produces a barely-visible elevation — just enough lift to separate a white card from the page without competing with its content. Crisp gives a zero-blur, hard-edged shadow popular in brutalist and retro design trends. Material reproduces Google Material Design's multi-layer shadow specification for apps with a familiar Android-style depth system.

Neumorphic combines a bright highlight on the top-left with a dark shadow on the bottom-right to make an element appear extruded from a matching surface. Glow Blue demonstrates how a zero-offset, coloured shadow creates a luminous button or hero accent — change the colour to match your brand. Inset Well shows the inset technique for recessed UI elements like text inputs and pressed states. Load any preset and adjust the sliders to push it exactly where your design needs it.

box-shadow vs filter: drop-shadow vs Figma Shadows — Which to Use?

box-shadow targets the element's rectangular border box. filter: drop-shadow() traces the element's alpha channel silhouette — correct for transparent PNGs and SVG cutouts but lacking inset support, spread radius, and multi-layer stacking. For every standard UI element (cards, buttons, modals, panels), `box-shadow` is the right tool.

Figma and Adobe XD both offer shadow design panels, but their outputs are design tool values — not always compatible with CSS without manual conversion. This generator produces valid, production-ready CSS directly, eliminating the translation step. Unlike Figma's limited free tier or Adobe XD's subscription model, UtiloKit is completely free, runs in any browser without installation, and produces multiple output formats (CSS, value, React) without requiring a design tool account.

Performance, Privacy, and Three Copy Formats

A static `box-shadow` is painted once and composited cheaply — no performance concern for most UI. Animating it directly triggers a repaint on every frame. The performant alternative: add a `::after` pseudo-element with the destination shadow already applied, then `transition: opacity` on that element. The GPU composites opacity without repainting the shadow, giving a smooth animation at zero repaint cost.

Once you've dialled in your shadow, copy in the format your project needs: CSS property for stylesheets, value only for CSS variables or SCSS maps, or React inline style for JSX `style` props and Styled Components. Your configuration is never saved to a server or sent anywhere — close the tab and it's gone. Bookmark the page and return whenever you need to iterate on a shadow design.

Works on Desktop, iPhone, Android, and Every Modern Browser

The box-shadow generator is fully responsive and works on any device with a modern browser. On desktop, you get a three-column layout with the layer stack on the left, the live preview in the centre, and generated code on the right. On iPhone and Android, the layout collapses to a vertical stack with touch-optimised sliders and color pickers that use the native system color picker.

All copy buttons use the Web Clipboard API supported by Safari 13.1+, Chrome 66+, Firefox 90+, and Edge 79+ — meaning copy functionality works on modern mobile browsers without any workaround. No app download, no account creation, no rate limits. Open the URL on any device and start designing immediately.

The CSS box-shadow Five-Value Syntax, Fully Explained

The complete box-shadow syntax is: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Only the two offsets and the color are required; blur and spread default to zero. Offset-X and offset-Y follow the CSS coordinate system whose origin is the top-left corner of the viewport: a positive offset-x moves the shadow to the right, a negative value to the left; a positive offset-y moves the shadow downward, a negative value upward. This means a shadow at 4px 8px sits below and to the right of the element — matching the convention of a light source above and to the left.

Blur-radius cannot be negative. At zero the shadow has a perfectly hard edge identical in shape to the element's border box — any value above zero applies a Gaussian blur to a solid silhouette of that box, so increasing blur widens and softens the fade. Spread-radius expands or shrinks the shadow outline before the blur is applied: a positive value makes the shadow larger than the element, a negative value contracts it. Setting offset-x: 0, offset-y: 0, blur: 0, and a positive spread produces a uniform solid border with no blur — a quick CSS alternative to outline or an extra wrapper element.

The optional inset keyword placed before the offsets switches the shadow from an outer drop shadow to an inner shadow drawn against the inside of the element's border box. The offset direction flips intuitively: a positive offset-y pushes the inner shadow down from the top edge, creating the appearance of a recessed cavity lit from above. Finally, any number of shadows can be stacked as a comma-separated list. The browser renders them in declaration order with the first shadow painted on top — so in a two-shadow neumorphic rule the highlight should come first (visually in front) and the darker shadow second. This ordering is the opposite of z-index stacking, which often trips up developers new to multi-layer shadows.

box-shadow vs filter: drop-shadow() — Choosing the Right Tool

The key difference between box-shadow and filter: drop-shadow() is what they shadow. box-shadow always shadows the element's rectangular border box — the layout rectangle defined by its width, height, padding, and border — regardless of what the element visually looks like. A PNG image with transparent corners gets a rectangular shadow that cuts across those transparent areas. filter: drop-shadow(), by contrast, traces the element's alpha channel silhouette: it follows the actual opaque pixels, so a transparent PNG cutout of a star gets a star-shaped shadow, and an SVG with cutout areas is shadowed around its real visible shape.

The performance characteristics differ as well. box-shadow is resolved during the browser's compositing step and is typically GPU-accelerated: the shadow is computed once and combined with the element's layer cheaply. filter: drop-shadow() may trigger the creation of a new stacking context and requires a pixel-level alpha-channel pass over the element's rendered content, which can be slower — especially when the element contains many child nodes. Modern browsers (Chromium 100+, Firefox 110+, Safari 16+) have improved filter acceleration significantly, but for animated shadows on complex components, box-shadow remains the lower-risk choice.

filter: drop-shadow() accepts only three positional values (offset-x offset-y blur-radius) plus a color — it has no equivalent to spread-radius and it does not support the inset keyword. Multiple filter shadows require chaining multiple drop-shadow() functions inside the same filter declaration, which is syntactically less clean than a comma list. The practical rule: use box-shadow for every standard UI component — cards, buttons, modals, tooltips, panels — and reserve filter: drop-shadow() exclusively for images with meaningful transparency, SVG icons, and irregularly-shaped decorative elements where the rectangular fallback would look obviously wrong.

Elevation Systems and Material Design's Dual-Shadow Approach

Google Material Design formalised shadow as a semantic elevation system rather than a purely decorative property. Every component has a resting elevation measured in density-independent pixels (dp) — a physical size unit that remains constant across screen densities. A flat surface sits at 0 dp; a raised button rests at 2 dp and lifts to 8 dp on hover; a dialog sits at 24 dp permanently. Elevation communicates interactivity: elements that react to touch or cursor hover rise visually when activated, giving users a tactile cue that input has been registered before any other state change occurs.

Material Design achieves realistic shadows by layering two simultaneous box-shadow declarations per elevation level — one for the key light (a directional source above and slightly in front of the surface, producing a crisp shadow with a moderate y-offset and high blur) and one for the ambient light (diffuse light from all directions, producing a softer, lower-opacity shadow with minimal offset and a smaller blur). At elevation 6dp, for example, the key-light shadow is approximately 0 3px 5px rgba(0,0,0,0.2) and the ambient shadow is 0 1px 18px rgba(0,0,0,0.12). The combination reads as three-dimensional in a way no single-layer shadow can match, because real objects are illuminated by both point sources and environmental bounce.

Independent of Material Design, designer Josh Comeau popularised two refinements that apply to any shadow system. First, tinting shadows with the background colour rather than using pure rgba(0,0,0,X): on a warm cream background, a shadow with a slight warm hue looks physically grounded, whereas a neutral-grey shadow looks pasted-on. Second, the smooth shadow technique — stacking five or six layers whose blur and offset values follow an easing curve (such as cubic-ease-in from a tiny value to a large one) rather than linear steps. The result passes the squint test: at any viewing distance the gradient of darkness around the element feels continuous rather than banded, which is what separates professional UI from generic web-app elevation.