Gerador de Gradiente CSS

Crie gradientes CSS lineares/radiais e copie a regra de background pronta.

Primeiro plano / Cor A

Fundo / Cor B

Direção

Ferramentas Sugeridas

Seletor de Cores
Escolha uma cor visualmente e copie HEX, RGB ou HSL para CSS e design.
HEX ↔ RGB
Converta cores entre HEX e RGB para CSS, canvas e handoff de design.
HEX ↔ HSL
Converta cores entre HEX e HSL para ajustar luminosidade e saturação em CSS.

Gerador de Gradiente CSS mistura stops e ângulos e exporta `background-image: linear-gradient(...)`.

Ajuste cores e direção, execute e cole o CSS na folha de estilos.

Ativa o JavaScript.