Gerador de gradientes CSS

Utilitários para desenvolvedores

Crie gradientes CSS lineares ou radiais com visualização ao vivo e CSS pronto para copiar.

Como usar

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

Choose linear or radial.
Set the angle and two colors.
Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

Perguntas frequentes

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

Ferramentas relacionadas

Gerador de paleta de cores Gere paletas de tons claros, escuros, análogos, complementares e tríade a partir de qualquer cor. Gerador de box-shadow CSS Crie sombras com controles de deslocamento, desfoque, expansão e cor e copie o CSS. Conversor de cores Converte cores entre HEX, RGB e HSL com uma amostra de pré-visualização ao vivo. Gerador de UUID / GUID Gera UUIDs aleatórios da versão 4 e os copia um a um ou em massa. Gerador de hash Calcula resumos MD5, SHA-1, SHA-256 e SHA-512 de qualquer texto. Conversor de timestamp Converte entre timestamps Unix, ISO 8601 e datas locais legíveis.