What is the difference between blur and spread?

Spread changes the shadow shape before blurring, while blur controls the softness of its edge.

Can I create an inner shadow?

Yes. Enable Inset to place the shadow inside the element’s border edge.

Does the tool create multiple comma-separated shadows?

No. It intentionally generates one bounded shadow layer at a time.

Are vendor prefixes included?

No. The output uses the current unprefixed CSS property and does not run a browser-targeting or prefixing tool.

Box Shadow Generator for Beginners: A Practical CSS Guide

A box shadow generator for beginners turns six adjustable values—horizontal offset, vertical offset, blur, spread, color, and opacity—plus an optional inset setting into one copy-ready CSS box-shadow declaration. The CSS Box Shadow Generator is useful when you want to see a shadow before writing CSS but do not yet know how its values affect position, softness, or size. Start with a modest shadow, watch how the sample card changes, and read the declaration beneath it. You can then paste the property into the selector for a card, button, panel, or other element that accepts box-shadow. The generator handles one shadow layer, writes the values in a deterministic order, and previews that exact value locally in your browser. It does not choose a selector, add HTML, or modify your project. That makes the workflow useful for learning the property as well as producing a value to test in a real interface across themes, screen sizes, and interaction states.

What Each Shadow Control Does

A beginner-friendly shadow should be built one decision at a time. Use offsets to choose where it appears, blur to soften its edge, spread to resize its shape, color and opacity to control its tone, and inset only when the shadow belongs inside the border edge. Each change is reflected in the sample card, so you can compare a restrained setting with a stronger one before copying anything.

Control	Range or format	What it changes
Horizontal offset	-200 to 200 pixels	Positive values move an outer shadow right; negative values move it left.
Vertical offset	-200 to 200 pixels	Positive values move an outer shadow downward; negative values move it upward.
Blur radius	0 to 200 pixels	Zero produces a hard edge. Larger values soften and expand the visible transition without changing the explicit spread value.
Spread radius	-100 to 100 pixels	Positive spread expands the shadow shape before blur; negative spread contracts it. A sufficiently negative value can make an outer shadow difficult to see.
Color	Six-digit hexadecimal	The red, green, and blue channels are converted into decimal rgba components.
Opacity	0 to 100 percent	The value becomes an alpha from 0 to 1, rounded to at most three decimal places. Zero alpha remains in the declaration but is invisible.
Inset	Off or on	Changes the shadow from an outer drop shadow to one drawn inside the element’s border edge.

Offsets work together rather than naming a compass direction. With an outer shadow, positive horizontal and vertical values move it right and down; negative values move it left and up. With inset enabled, the same offsets affect the perceived inner direction. The syntax follows the CSS model in the W3C Backgrounds and Borders box-shadow specification and the MDN box-shadow reference.

Create and Copy Your First Shadow

Open the generator. Use the CSS Box Shadow Generator and locate the sample card and declaration beneath it. The preview and serialized code update locally in your browser, while the sample card uses the generated value inline only for that local preview. No CSS, color choice, or clipboard content is sent to a server.
Choose outer or inset. Leave Inset off for a shadow outside the element’s border edge, or enable it for a shadow drawn inside that edge. Inset is useful for pressed controls, recessed panels, inner highlights, and other depth cues.
Position the shadow. Set horizontal and vertical offsets within the -200 to 200 pixel limits. For an outer shadow, positive horizontal values move it right and negative values move it left; positive vertical values move it down and negative values move it up.
Set softness and shape. Choose a blur radius from 0 to 200 pixels and a spread radius from -100 to 100 pixels. A blur of zero gives a hard edge. Positive spread expands the shadow shape before blurring, while negative spread contracts it and may hide an outer shadow.
Select the color and opacity. Enter a six-digit hexadecimal color and set opacity from 0 to 100 percent. The tool converts the color channels into decimal rgba components and writes opacity as an alpha value from 0 to 1.
Inspect the sample and declaration. Check the card’s appearance, then read the exact generated declaration below it. This is the value used for the local preview, so you can compare your intended effect with the code you will paste.
Copy the plain declaration. The copied output contains the box-shadow property and its value. It does not include a selector, HTML fragment, style tag, JavaScript, or vendor prefix.
Paste and test it. Place the declaration in the intended style rule for an element that accepts box-shadow. Test the real component across themes, sizes, focus states, and browsers rather than relying only on the sample card.

Read the Generated CSS

The output order is fixed: optional inset, horizontal offset, vertical offset, blur radius, spread radius, and then the rgba color. The four length values use pixels. When opacity is zero, the resulting alpha stays in the declaration, so the shadow remains syntactically present even though no visible shadow appears.

One possible declaration is box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25);. Here, the shadow sits four pixels right and eight pixels down, uses a 16-pixel blur, has no spread, and applies a 25-percent black alpha.

The copied result is plain text intended for a style rule whose element accepts box-shadow. Modern browsers generally support the unprefixed property, but the generator does not add legacy -webkit- or -moz- prefixes, detect browser targets, run an autoprefixer, or test a production stylesheet.

Choose Between Outer and Inset Shadows

Outer and inset shadows can suggest different kinds of structure. Choose the mode based on the relationship you want the shadow to communicate rather than on the appearance of the sample card alone.

Consideration	Outer shadow	Inset shadow
Placement	Appears outside the element’s border edge.	Appears inside the element’s border edge.
Useful for	Raised cards, buttons, panels, and floating surfaces.	Pressed controls, recessed panels, inner highlights, and depth cues.
Offset behavior	Positive horizontal and vertical values move the visible shadow right and down.	The same offsets affect the perceived direction of the inner shadow.
Main caution	A dramatic value can make the component look detached from its surface.	A strong value can make a pressed or recessed surface look harsh or textured.

Whichever mode you choose, the shadow should reinforce structure rather than carry essential meaning alone. Check light and dark themes, disabled and focus states, high-contrast settings, and reduced-transparency preferences where relevant. Shadows can reduce clarity, create false hierarchy, or perform poorly over complex backgrounds.

Test the Shadow in the Real Interface

The sample card shows the generated value in isolation, but it cannot reproduce your layout, theme, or element shape. After pasting the declaration into the intended selector, inspect the actual component on backgrounds similar to its final destination.

Test the element in both light and dark themes so the chosen color and opacity remain appropriate.
Check small, typical, and large component sizes to see how the offset and visible footprint affect the design.
Review interaction states such as hover and focus, along with disabled states where relevant.
Open the page in the browsers you support and confirm that the shadow does not obscure content or controls.
Expect slight rendering differences caused by pixel density, transforms, zoom, compositing, or the element’s shape.
Read the component as a user would. If the shadow competes with text, makes the surface harder to understand, or suggests the wrong state, reduce its intensity.

Refine Settings and Keep the Workflow Repeatable

A dependable first pass uses modest offsets, a blur larger than the offset, zero or small spread, and low opacity. Increase one control at a time and watch both the sample card and the real component. This makes it easier to identify which value caused a visual change.

If the shadow disappears, check for zero alpha and a sufficiently negative spread value.
If the edge is too hard, adjust blur. If the footprint is wrong, change spread rather than treating blur as a substitute.
The generator creates one shadow layer. Combining comma-separated layers is outside its scope, and it does not generate text-shadow, filter drop-shadow, elevation tokens, Tailwind classes, design-system variables, or animation keyframes.
The tool does not modify project files or preserve settings after a reload, so keep the copied declaration with the styles you are editing.

For a beginner using a box shadow generator, the dependable sequence is simple: generate, inspect, copy, paste, and test. The CSS Box Shadow Generator makes each part visible without pretending to be a complete design system. Once the single-layer workflow is familiar, the box-shadow parameter and recipe cheat sheet provides a compact reference for trying further variations.