Quais tipos de gradiente são suportados?

Linear (baseado em direção), radial (circular ou elíptico) e cônico (varredura angular). Todos os três são CSS3 padrão e suportados em todos os navegadores modernos.

Como adiciono mais de duas cores?

Use o botão "Adicionar parada" para adicionar paradas de cor adicionais. Cada parada tem uma cor e uma posição entre 0 e 100 por cento. Você pode ter até 8 paradas.

Quais navegadores suportam gradientes cônicos?

Gradientes cônicos são suportados no Chrome 69+, Firefox 83+, Safari 12.1+ e Edge 79+. Para navegadores mais antigos, use gradientes linear ou radial.

Posso salvar meu gradiente?

O gerador produz uma declaração CSS que você pode copiar para sua folha de estilo. Salvar a URL completa nos favoritos não preserva o estado atualmente.

Gerador de Gradiente CSS

Crie gradientes CSS linear, radial e cônico com visualização ao vivo

Seus dados nunca saem do seu dispositivo

Tipo de gradiente

Ângulo: 45°

Paradas de cor (2/8)

Visualização

Saída CSS

background: linear-gradient(45deg, #ff6e7f 0%, #bfe9ff 100%);

Predefinições

Perguntas Frequentes

Quais tipos de gradiente são suportados?

Linear (baseado em direção), radial (circular ou elíptico) e cônico (varredura angular). Todos os três são CSS3 padrão e suportados em todos os navegadores modernos.
Como adiciono mais de duas cores?

Use o botão "Adicionar parada" para adicionar paradas de cor adicionais. Cada parada tem uma cor e uma posição entre 0 e 100 por cento. Você pode ter até 8 paradas.
Quais navegadores suportam gradientes cônicos?

Gradientes cônicos são suportados no Chrome 69+, Firefox 83+, Safari 12.1+ e Edge 79+. Para navegadores mais antigos, use gradientes linear ou radial.
Posso salvar meu gradiente?

O gerador produz uma declaração CSS que você pode copiar para sua folha de estilo. Salvar a URL completa nos favoritos não preserva o estado atualmente.