What is a CSS box shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. You can specify horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be layered for complex effects.

How do I create an inset shadow?

Add the 'inset' keyword to the box-shadow property. Inset shadows appear inside the element's border, creating a pressed or recessed effect. Toggle the Inset option in the generator to see the difference.

Can I have multiple box shadows?

Yes! CSS allows multiple box shadows separated by commas. This enables complex effects like combining an outer shadow with an inset highlight. Use the 'Add Shadow' button in our generator to layer multiple shadows.

Does box-shadow affect layout?

No, box-shadow doesn't affect layout or element size. It's rendered outside the element without affecting surrounding elements. Use the spread value to control how far the shadow extends.

How do I make a CSS glow effect?

A glow effect uses a colored shadow with 0 offset and high blur. For example: box-shadow: 0 0 20px rgba(99, 102, 241, 0.6). Try the 'Glow' preset in the generator for an instant example.

CSS Box-Shadow-Generator

Erstelle CSS-Boxschatten visuell mit Live-Vorschau. Passe Versatz, Unschärfe, Ausdehnung, Farbe und mehrere Ebenen an.

Vorschau

CSS-Ausgabe

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.18);

Horizontaler Versatz0px

Vertikaler Versatz4px

Unschärferadius16px

Ausdehnungsradius-2px

Farbe

Deckkraft18%

Innen

Vorlagen

Anleitung

Erstelle CSS-Boxschatten visuell mit Live-Vorschau. Passe Versatz, Unschärfe, Ausdehnung, Farbe und mehrere Ebenen an.

1Adjust the sliders to set horizontal offset, vertical offset, blur, and spread.
2Pick a shadow color and set the opacity for transparency.
3Toggle 'Inset' to switch between outer and inner shadows.
4Click 'Add Shadow' to layer multiple shadows for complex effects.
5Copy the generated CSS and paste it into your stylesheet.

Funktionen

Real-time preview of box shadow effects
Multiple shadow layers for complex designs
Inset shadow support for pressed effects
8 professional presets to get started quickly

CSS Box-Shadow-Generator

Anleitung

Funktionen

Häufig gestellte Fragen