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.

Generador de CSS Box Shadow

Genera visualmente sombras CSS box shadow con vista previa en vivo. Personaliza desplazamiento, desenfoque, expansión, color y capas múltiples.

Vista previa

Salida CSS

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

Desplazamiento horizontal0px

Desplazamiento vertical4px

Radio de desenfoque16px

Radio de expansión-2px

Color

Opacidad18%

Interior

Preajustes

Cómo usar

Genera visualmente sombras CSS box shadow con vista previa en vivo. Personaliza desplazamiento, desenfoque, expansión, color y capas múltiples.

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.

Características

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

Generador de CSS Box Shadow

Cómo usar

Características

Preguntas frecuentes