Xerador de box-shadow CSS en liña e de balde

Q: Como fago unha sombra interior?

Engade inset ao principio: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. É útil para campos de formulario ou botóns premidos.

Q: Por que a sombra do meu PNG transparente sae cadrada?

Porque box-shadow segue a caixa do elemento, non o debuxo. Para que siga a silueta, usa filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

Como funciona box-shadow

A propiedade box-shadow debuxa unha ou varias sombras arredor da caixa dun elemento. Cada sombra escríbese nesta orde:

box-shadow: [inset] desprazamento-x desprazamento-y [desenfoque] [expansión] cor;

Desprazamento horizontal e vertical: canto se move a sombra cara á dereita e cara abaixo. Con valores negativos vai á esquerda ou cara arriba.
Desenfoque: canto maior, máis difuminado o bordo. Con 0 a sombra ten o bordo nítido.
Expansión: agranda ou encolle a sombra antes de desenfocala. Un valor negativo métea por debaixo do elemento.
Cor: case sempre negro ou a cor do fondo con pouca opacidade, por exemplo rgba(0, 0, 0, 0.2).
inset: a sombra vai por dentro do elemento, coma se estivese afundido.

Varias sombras nun mesmo elemento

As sombras sepáranse con comas e a primeira queda por riba das demais. Combinar unha sombra curta e marcada con outra ampla e suave dá un resultado moito máis natural ca unha soa sombra escura: é o que fan os exemplos Elevada e Por capas.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

Sombras en imaxes: box-shadow ou drop-shadow

box-shadow segue a forma da caixa, incluído o seu border-radius, así que é o que necesitas para fotos e tarxetas. Se a imaxe é un PNG ou un SVG con fondo transparente e queres que a sombra siga o contorno do debuxo, usa o filtro drop-shadow():

img.logo { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }

drop-shadow() non admite expansión nin inset, e non se pode combinar con varias capas separadas por comas.

Consellos

Usa opacidades baixas (entre 0,05 e 0,25): unha sombra negra ao 50 % case nunca queda ben.
Para unha sombra só por abaixo, combina desprazamento vertical con expansión negativa: 0 8px 6px -6px.
No modo escuro as sombras apenas se ven: un bordo sutil ou un fondo algo máis claro funcionan mellor.
Para animar unha sombra, anima a opacity dun pseudoelemento que a leve, non o propio box-shadow: é moito máis fluído.

Preguntas frecuentes

Que é box-shadow en CSS?

É a propiedade que engade sombras á caixa dun elemento. Admite desprazamento, desenfoque, expansión, cor e a palabra clave inset, e pódense aplicar varias sombras separadas por comas. Funciona en todos os navegadores actuais sen prefixos.

Como poño unha sombra só na parte de abaixo?

Usa un desprazamento vertical positivo e unha expansión negativa da mesma orde que o desenfoque, para que a sombra non asome polos lados: box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

Como fago unha sombra interior?

Engade inset ao principio: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. É útil para campos de formulario ou botóns premidos.

Pódense poñer varias sombras á vez?

Si, separándoas con comas. A primeira da lista píntase por riba. Neste xerador, cada sombra é unha capa.

Por que a sombra do meu PNG transparente sae cadrada?

Porque box-shadow segue a caixa do elemento, non o debuxo. Para que siga a silueta, usa filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

Afecta box-shadow ao rendemento?

Unha sombra estática apenas custa. O que pesa é animala ou usar desenfoques moi grandes en moitos elementos, porque obriga a repintar. Para animacións, cambia a opacidade dun pseudoelemento coa sombra.

Xerador de box-shadow

Código CSS

Como funciona box-shadow

Varias sombras nun mesmo elemento

Sombras en imaxes: box-shadow ou drop-shadow

Consellos

Preguntas frecuentes

Máis ferramentas