131 · Design e Web

Gerador de gradiente CSS

Escolha cores e um ângulo, veja o gradiente ao vivo e copie o CSS.

Seus dados: Esta ferramenta processa sua entrada neste navegador. CapyHelp não carrega essa entrada para gerar seu resultado. Detalhes de privacidade

Gerador de gradiente CSS

Tipo
#4f46e5
#ec4899
#f59e0b

Como usar o gerador de gradiente CSS

  1. Escolha linear, radial ou cônico.
  2. Escolha duas ou três cores e defina o ângulo.
  3. Copie o CSS em sua folha de estilo.

Tipos de gradiente

  • linear se mistura ao longo de uma linha reta no ângulo que você escolher.
  • radial se espalha a partir do centro como um círculo ou elipse.
  • Cônico varre o centro como uma roda de cores.

A primeira linha do CSS tem uma cor de fundo simples para navegadores muito antigos.

Exemplos

Índigo a rosa a 135°

plano de fundo: gradiente linear (135 graus, #4f46e5, #ec4899);

Círculo radial

fundo: gradiente radial (círculo,…);

Perguntas

Os gradientes funcionam em todos os navegadores?

Gradientes lineares e radiais funcionam em todos os navegadores atuais. Gradientes cônicos também funcionam em todos os principais navegadores atuais.

Tradução automática. Revise resultados importantes.