Gerador de gradiente CSS
Crie gradientes lineares, radiais e cônicos com este gerador de gradiente CSS online grátis, com prévia ao vivo, paradas de cor, ângulo e código para copiar.
What next?
Achou útil? Compartilhe Gerador de gradiente CSS
Grátis, sem cadastro, funciona no navegador — envie para um amigo ou adicione ao seu site.
Ferramentas relacionadas
- Seletor de coresEscolha uma cor e converta HEX para RGB, HSL, HSV e CMYK online grátis. Seletor de cores online grátis com conta-gotas de imagem, tons e contraste WCAG.
- Simulador de daltonismoVeja imagens como pessoas daltônicas veem — simule deuteranopia, protanopia, tritanopia e acromatopsia online grátis, com gravidade ajustável.
- Gerador de cores aleatóriasGere cores com este gerador de cores aleatórias online grátis: pastéis, vivas, escuras, quentes ou frias, com códigos HEX, RGB e HSL para copiar.
- Tradutor de binárioTraduza texto para binário e binário para texto com este tradutor binário online grátis e converta números entre binário, decimal, hexadecimal e octal.
- Comparador de diferençasCompare dois textos com este comparador de diferenças online grátis e destaque cada mudança por linha, palavra ou caractere, ignorando maiúsculas e espaços.
- Gerador de QR CodeCrie códigos com este gerador de QR Code online grátis para links, texto, Wi-Fi, e-mail, telefone e SMS. Sem cadastro, nunca expira, baixe em PNG ou SVG.
Faz parte destes kits
Como usar Gerador de gradiente CSS
- 1Escolha Linear, Radial ou Cônico e defina o ângulo ou a forma
- 2Escolha cores com o seletor ou digite códigos hex, arraste a posição de cada parada, adicione até 8 cores ou comece de uma predefinição ou Aleatório
- 3Clique em Copiar CSS para colar a regra de fundo (com cor sólida de reserva) na sua folha de estilos
Perguntas frequentes
Como faço um fundo em gradiente em CSS?▾
Use a propriedade background com uma função de gradiente, por ex. background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. O ângulo define a direção e cada cor pode ter uma posição de parada.
Qual é a diferença entre gradientes linear, radial e cônico?▾
Gradientes lineares misturam as cores ao longo de uma linha reta em um ângulo, gradientes radiais se espalham a partir de um ponto central e gradientes cônicos varrem as cores ao redor do centro como um círculo cromático ou gráfico de pizza.
O que significa o ângulo em linear-gradient?▾
0deg aponta para cima (de baixo para cima), 90deg vai da esquerda para a direita, 180deg de cima para baixo e 135deg corre na diagonal do canto superior esquerdo ao inferior direito.
Os gradientes CSS funcionam em todos os navegadores?▾
Gradientes lineares e radiais funcionam em todos os navegadores modernos sem prefixos. Os gradientes cônicos são compatíveis com todos os navegadores atuais desde 2020. O código gerado adiciona antes uma cor sólida como alternativa.
Posso usar um gradiente no texto?▾
Sim: defina o gradiente como background e depois adicione background-clip: text; -webkit-background-clip: text; e color: transparent; ao elemento de texto.
Embed Gerador de gradiente CSS on your website▾
Paste this snippet into your page. The embedded tool runs in your visitor's browser and shows a small “Powered by clkr.work” link.