ProUtils

Gerador de box-shadow CSS

Projete sombras CSS box-shadow com um editor visual.

Preview
Shadow 1
12px
box-shadow: 4px 4px 15px 0px #00000025;

How to Use

  1. 1

    Use the sliders to adjust the shadow offset, blur, spread, and color.

  2. 2

    Add more shadow layers with the Add Shadow button for complex multi-layer effects.

  3. 3

    Copy the CSS box-shadow code and paste it directly into your stylesheet.

Features

Multiple Shadow Layers

Stack multiple box-shadow layers to create complex, realistic drop shadow effects.

Inset Shadow Support

Toggle inset mode to place shadows inside the element for pressed or embossed effects.

Full Control

Adjust X/Y offset, blur radius, spread radius, and color independently for each layer.

Copy CSS

Copy the complete box-shadow CSS property value ready to paste into your code.

FAQ

Múltiplas sombras?

Sim, ajuste offset, blur, spread e cor de cada camada.

Sombra inset?

Aparece dentro do elemento, criando efeito de afundamento.

Ferramentas relacionadas

Ferramentas de desenvolvedor