Box Shadow CSS Generator

Fast, accurate and free online box shadow css generator tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

CSS Shadow Generator

Create professional box-shadow effects layer by layer.

Ready style

Warstwy (2)

Warstwa #1

X-axis 0px

Y axis 4px

Blur 14px

Spread 0px

Shadow color

Transparency (Alpha) 10%

Inner Shadow (Inset)

Warstwa #2

X-axis 0px

Y axis 1px

Blur 3px

Spread 0px

Shadow color

Transparency (Alpha) 5%

Inner Shadow (Inset)

Live preview

Background color

Box Color

Rounding (Radius) 12px

Kod CSS

Legacy (-webkit)

box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.05);

Rate this tool:

Related tools

Other tools you may find useful

CSS box-shadow generator - layers, presets, insets and depth systems

The tool generates multi-layer shadows for any CSS elements. You will set the offsets, blur, spread, color, opacity and inset flag. You will receive clean code with the option of legacy prefixes and live preview. Additionally, you will find practical recipes, depth systems and tricks that will speed up your work in future projects.

In the panel you can set the preview background, fillet radius and shadow layers. Each layer has parameters:x, y, blur, spread, color, alphaand switchinset. The order of the layers matters. Later layers render on top of earlier ones.

How the box-shadow CSS Generator works

The engine composes the value ofbox-shadowfrom a list of layers separated by commas. Each layer has the form[inset] offset-x offset-y blur spread color. Color is written asrgba()to maintain control over opacity. For full compatibility, you can enablelegacy, which adds the lines-webkit-box-shadow i -moz-box-shadow.

Parameters and effects on the effect

Layer components

x- horizontal shift. Positive values cast a shadow to the right.
y- vertical shift. Positive values cast a shadow downwards.
blur- blur radius. The bigger it is, the softer the shadow.
spread- expanding the shadow patch. Positive widens, negative narrows.
color i a- shadow color and opacity in percent.
inset- moves the shadow inside the element, giving a concave effect.

Global settings

bg- element background with shadow. It has a large impact on the perception of contrast.
radius- rounding radius. Match the style of tabs and buttons.
legacy- additional prefixes for older browser engines.

Presets and applications

Preset	Layers	Application
soft	two soft layers with a small blur and a larger blur	UI tabs, lists, settings panel
hard	shorter, more contrast layer over softer	action buttons, compact elements
inset	single inner layer	input fields, concave panels, emboss style

Pre-built code examples

1. Soft shadow for cards

.card-soft {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 3px 6px 0 rgba(0,0,0,.20),
    0 10px 20px 0 rgba(0,0,0,.15);
}

2. Contrasting shadow for buttons

.btn-hard {
  border-radius: 12px;
  box-shadow:
    0 6px 10px 0 rgba(0,0,0,.35),
    0 2px 4px 0 rgba(0,0,0,.20);
}

3. Inner box shadow

.input-inset {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.25);
}

4. Elevation system based on variables

:root{
  --e1: 0 1px 2px rgba(0,0,0,.10);
  --e2: 0 2px 6px rgba(0,0,0,.14);
  --e3: 0 6px 16px rgba(0,0,0,.16);
  --e4: 0 10px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
}
.e-1{ box-shadow: var(--e1); }
.e-2{ box-shadow: var(--e2); }
.e-3{ box-shadow: var(--e3); }
.e-4{ box-shadow: var(--e4); }

Mature shading strategies

Contact layer