COMO ADICIONAR SOMBRA NO CSS
Conteúdo
Como colocar sombra em um elemento no CSS?
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:
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;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:
.card { width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
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:
.card { width: 300px;
height: 150px;
background-color: #2ecc71;
box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.5);
}
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:
text-shadow: horizontal-offset vertical-offset blur-radius color;Exemplo básico
Vamos adicionar uma sombra num título:
h1 { color: #e74c3c;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
}
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:
h2 { color: #8e44ad;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(255, 255, 255, 0.3);
}
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:
div { width: 300px;
height: 150px;
background-color: #9b59b6;
box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3);
}
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?
button { padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
button:hover {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}
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. 🎨
