Como colocar sombra em um elemento no CSS?
sombra CSS text box shadow
Use box-shadow para sombras em caixas e text-shadow para textos. Com poucos ajustes, crie efeitos incríveis! Veja exemplos e truques no artigo completo. 🚀
Assista o vídeo abaixo:
Se você quer dar aquele toque de estilo nos elementos do seu site, adicionar sombras com CSS é uma solução simples e eficiente. No CSS, a gente tem duas ferramentas principais para isso: a propriedade box-shadow, que cria sombras em caixas, e a text-shadow, que faz o mesmo com textos. Bora ver como usar isso na prática?
Sombra em caixas com box-shadow
A propriedade box-shadow é usada para criar sombras em elementos como divs, botões, ou qualquer coisa com formato de bloco. Aqui está a receita básica para usar:
Agora, traduzindo:
- horizontal-offset: a distância horizontal da sombra (positivo joga pra direita, negativo pra esquerda).
- vertical-offset: a distância vertical (positivo joga pra baixo, negativo pra cima).
- blur-radius: o quanto a sombra vai ser desfocada.
- spread-radius: controla o tamanho da sombra (positivo aumenta, negativo diminui).
- color: a cor da sombra, que pode ser em hex,
rgb, ou até com transparência usandorgba.
Exemplo básico
Imagina que você quer criar uma sombra simples pra destacar um card:
Aqui, a sombra está deslocada 10px pra direita e 10px pra baixo, com um desfoque suave de 15px e um tom escuro com 30% de transparência. O resultado? Uma sombra discreta e elegante.
Quer mais drama? Vamos aumentar o spread!
Se a ideia é algo mais chamativo, você pode brincar com o spread-radius:
Aqui, além do desfoque, a sombra ficou mais espalhada, criando um efeito mais intenso.
Sombra no texto com text-shadow
Agora, se a sua missão é deixar o texto mais estiloso, a propriedade text-shadow é sua melhor amiga. A sintaxe é quase igual ao box-shadow:
Exemplo básico
Vamos adicionar uma sombra num título:
Esse exemplo cria uma sombra deslocada 3px pra baixo e pra direita, com um leve desfoque. Ótimo pra destacar o texto e dar aquele toque mais impactante.
Sombras múltiplas
Se você quer ir além, pode combinar várias sombras no mesmo texto:
Aqui, a gente aplicou uma sombra escura pra baixo e uma sombra clara pra cima, criando um efeito tridimensional.
Truques e Dicas Avançadas
Sombra interna com inset
Sabia que dá pra colocar a sombra dentro do elemento? É só usar o valor inset:
O resultado é uma sombra que parece “afundar” o conteúdo, como se fosse um relevo invertido.
Efeito de hover com sombra
Que tal uma interação bacana quando o usuário passar o mouse?
Aqui, a sombra do botão aumenta de leve quando o usuário passa o mouse, criando um efeito bem legal.
Agora sabe como usar o drop shadow css?
Viu como é tranquilo usar sombras no CSS? Seja pra destacar um botão, dar profundidade num card ou até criar um efeito visual mais artístico, as propriedades box-shadow e text-shadow te dão várias opções. É só usar a criatividade e experimentar!
Agora é a sua vez: aplique essas dicas no seu projeto e veja como seus elementos ganham vida com um toque de sombra bem colocado. 🎨
Leia mais em: eveloper.mozilla.org/en-US/do...
