CSS Gradient Builder
Understand CSS Gradient Builder
Monta gradientes CSS lineares, radiais e cônicos a partir de paradas de cor, com prévia ao vivo e uma declaração background copiável.
How it works
Um gradiente é desenhado ao longo de uma linha (linear), para fora a partir de um ponto central (radial) ou em torno de um ponto central (cônico), com cada parada de cor fixada em uma porcentagem daquele percurso e os pixels entre as paradas interpolados. Os ângulos do CSS para gradientes lineares são medidos no sentido horário a partir de "to top", então 0deg vai de baixo para cima, 90deg vai da esquerda para a direita e 180deg vai de cima para baixo — o que é a convenção oposta à usada pela maioria das ferramentas de desenho. A interpolação acontece em sRGB por padrão, canal a canal, e é por isso que o ponto médio entre azul e amarelo sai cinza em vez de verde.
When to use it
- Produzir um fundo de destaque ou de seção sem escrever à mão a sintaxe das paradas
- Montar uma sobreposição sutil de duas paradas para colocar texto sobre uma imagem com segurança
- Criar um gradiente cônico para um anel de progresso, um segmento de pizza ou uma roda de cores
- Obter o CSS exato de um gradiente que um designer especificou como um ângulo e dois valores hex
Watch out for
- Um gradiente é uma imagem, não uma cor. Ele define background-image, então a `background-color` ainda aparece por trás de qualquer transparência e continua sendo a alternativa caso o gradiente não seja aplicado — defina as duas.
- Dois matizes complementares se interpolam passando pelo cinza. Acrescente uma parada intermediária em um matiz entre eles, ou especifique um espaço de interpolação como `in oklch`, para manter a transição saturada.
- Gradientes grandes e de baixo contraste formam faixas visíveis. Oito bits por canal não expressam uma rampa suave ao longo de 1000 pixels de cor quase idêntica; acrescente uma sobreposição sutil de ruído ou aumente a distância entre as cores.
- As paradas em porcentagem são relativas à linha do gradiente, não ao elemento, e a linha de um gradiente linear inclinado é mais longa que a caixa. Uma parada em 50% não é o centro geométrico do elemento, a menos que o ângulo seja 0 ou 90 graus.
Frequently Asked Questions
Como fazer um fundo em gradiente no CSS?
Use a propriedade background com uma função de gradiente: background: linear-gradient(135deg, #5C5BFE, #F2A03D). O primeiro argumento é o ângulo (0deg = de baixo para cima, 90deg = da esquerda para a direita). Use radial-gradient() para gradientes circulares ou conic-gradient() para angulares.
Como adicionar um gradiente linear no CSS?
Acrescente background: linear-gradient(direção, parada1, parada2, ...) a qualquer elemento. A direção pode ser um ângulo (45deg) ou uma palavra-chave (to right, to bottom right). Exemplo: background: linear-gradient(to right, #667eea, #764ba2). Funciona em qualquer elemento de bloco.
Como usar linear gradient no CSS?
linear-gradient() cria uma transição suave entre paradas de cor ao longo de uma linha. Use-o em fundos de botão, seções de destaque, sobreposições de cartão e divisores diagonais. Empilhe vários gradientes separados por vírgula para efeitos em camadas. Este construtor devolve a propriedade CSS pronta para colar.
How to Use CSS Gradient Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.