Gerador de CSS
Crie gradientes, sombras e cantos arredondados de forma visual e copie o CSS de que eles precisam.
Gerador de CSS - gradientes, sombras e cantos arredondados
Crie três dos efeitos de CSS mais usados olhando o resultado, em vez de ir por tentativa e erro: gradientes, sombras (box-shadow) e bordas arredondadas (border-radius). Mova um controle ou escolha uma cor e a caixa de prévia muda na hora; o CSS logo abaixo é sempre exatamente o que a prévia mostra, pronto para colar na sua folha de estilos.
O resultado usa as propriedades padrão background, box-shadow e border-radius, que todos os navegadores atuais suportam sem prefixos de fornecedor. Nada é enviado para lugar nenhum: a ferramenta roda no seu navegador.
Como usar
- Escolha Gradiente, Sombra ou Bordas arredondadas.
- Mova os controles deslizantes, digite números exatos nas caixas ao lado deles ou escolha as cores.
- Clique em Aleatório para ter um ponto de partida, ou em Redefinir para voltar aos valores padrão.
- Copie o CSS abaixo da prévia.
Gradientes
Um gradiente (ou degradê) é uma imagem desenhada pelo navegador, por isso vai em background (ou background-image) e se ajusta a qualquer tamanho sem ficar borrado. Há três tipos:
| Tipo | Exemplo | Aparência |
|---|---|---|
| Linear | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | As cores mudam ao longo de uma linha reta, no ângulo que você define |
| Radial | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | As cores se espalham a partir do centro em anéis |
| Cônico | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | As cores giram em torno do centro, como uma roda de cores |
Cada cor tem uma posição em porcentagem. Duas cores na mesma posição criam uma borda dura em vez de uma transição, e é assim que listras e gráficos de pizza são feitos só com CSS. Use Adicionar cor para ter até seis paradas, distribuídas por igual; Remover cor tira a última, até sobrarem duas.
Os ângulos no CSS começam no topo e giram no sentido horário: 0deg aponta para cima, 90deg para a direita e 180deg para baixo.
Sombras (box-shadow)
Uma box-shadow aceita até cinco valores: deslocamento horizontal, deslocamento vertical, desfoque, expansão e cor, mais a palavra-chave opcional inset.
- Horizontal e Vertical deslocam a sombra; valores negativos a movem para a esquerda ou para cima.
- Desfoque suaviza a borda. Com 0, a sombra fica dura, como um recorte.
- Expansão aumenta a sombra antes do desfoque. Uma expansão negativa com um desfoque grande dá o efeito suave, de elemento flutuando, comum em interfaces modernas.
- Opacidade vai embutida na cor como
rgba(), então a sombra nunca esconde o que está atrás dela. - Sombra interna (inset) desenha a sombra dentro da caixa, o que a faz parecer afundada.
Sombras sutis costumam ficar melhores do que sombras fortes: uma cor escura e levemente transparente, tirada da sua paleta, em vez de preto puro, se integra de forma mais natural.
Bordas arredondadas (border-radius)
Com Mesmo valor para todos os cantos marcado, um único controle arredonda os quatro cantos. Desmarque para ajustar cada canto separadamente; o CSS então lista quatro valores na ordem superior esquerdo, superior direito, inferior direito, inferior esquerdo.
Em pixels, o arredondamento é o mesmo em qualquer tamanho. Em porcentagem, ele acompanha a caixa: border-radius: 50% transforma um quadrado em círculo e um retângulo em elipse.
Ferramentas relacionadas
Para converter uma cor entre HEX, RGB e HSL, ou achar uma com contraste suficiente em relação ao fundo, use o conversor de cores. Para organizar ou minificar a folha de estilos em que você cola o CSS, use o formatador de código. As páginas de tarefa abrem esta ferramenta em um único efeito: gerador de gradiente CSS, gerador de box-shadow e gerador de border-radius.