CSS · Design visual
Gerador de box-shadow CSS online
Crie sombras CSS com controlos visuais, várias camadas, transparência e pré-visualização imediata.
CSS Shadow Generator
Configuração
Editable presets
Pré-visualização
Quick guide
What is box-shadow?
box-shadow adds one or more shadows around an element. This tool generates the code without executing user-provided CSS.
box-shadow syntax
The syntax combines offset-x, offset-y, blur, spread and color. The inset keyword turns an outer shadow into an inner shadow.
Blur and spread
Blur softens the shadow edges. Spread expands or contracts it; blur cannot be negative.
What does inset do?
An inset shadow is drawn inside the element and is useful for depth or pressed effects.
Multiple shadows
CSS separates multiple shadows with commas. They are applied in the order shown and can be reordered with the buttons.
Frequently asked questions
Questions about CSS shadows
How do I create a CSS shadow?
Adjust the controls and copy the generated box-shadow declaration.
What does box-shadow mean?
It is the CSS property that draws one or more shadows around a box.
How do I make a soft shadow?
Use small offsets, broad blur and low opacity.
What is blur?
It is the blur radius that softens the shadow transition.
What is spread?
It expands or reduces the shadow size before blur is applied.
How do I create an inner shadow?
Enable Inner shadow to add the inset keyword.
Can I use multiple shadows?
Yes. Add layers and reorder them; the code will separate them with commas.
How do I make a transparent shadow?
Choose a color and adjust its opacity.
Does it work in modern browsers?
box-shadow is supported by common modern browsers.
