Instalar o ZYBERMART

Abra qualquer ferramenta pela tela inicial ou pelo Dock, em uma janela própria. As ferramentas que você já usou também funcionam offline.

Gerador de box-shadow

Crie sombras CSS suaves, em camadas ou internas com prévia ao vivo, e copie o CSS.

CSS


        

box-shadow syntax

box-shadow: [inset] x-offset y-offset blur spread color;

Separate multiple shadows with commas. The first shadow is drawn on top.

Popular shadow styles

  • Subtle card: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08)
  • Raised: 0 10px 25px -5px rgba(0,0,0,.15)
  • Glow: 0 0 20px 4px rgba(255,90,31,.45)

Frequently asked questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius and color, plus the optional keyword inset. For example, 0 4px 12px 0 rgba(0,0,0,0.15) is a soft shadow 4px below the element.

How do I make shadows look realistic?

Layer two or three shadows: a small, sharper one close to the element and a larger, softer one further away, both with low opacity. Real light rarely produces one hard, dark shadow.

What does inset do?

inset draws the shadow inside the element instead of outside it, making it look pressed in. It's useful for input fields and pressed buttons.

Does box-shadow affect performance?

Shadows are cheap for normal use. Animating large blur radii on many elements can slow scrolling on low-end phones; animate opacity or transform instead where possible.

Entrar no ZYBERMART

Tenha seus currículos, faturas, flashcards, notas e ferramentas salvas em todos os seus dispositivos. É grátis, e as ferramentas funcionam igual sem conta.

ou

Não precisa de senha. Ao entrar, você concorda com os termos; veja como tratamos seus dados na política de privacidade.

Sua conta

Ao sair, uma cópia do seu trabalho fica neste navegador. Em um computador compartilhado, limpe os dados do navegador depois.

O que você quer criar?

Designs

Redes sociais

Documentos

Estudos

Editar

Ver todas as 282 ferramentas