Gerador de gradiente

Gradientes CSS linear / radial / cônico com paradas de cor, prévia e código copiável

Crie gradientes CSS (linear, radial, cônico) com paradas de cor e ângulos personalizados. A prévia ao vivo atualiza conforme você ajusta cada parada; o CSS gerado está pronto para copiar para sua folha de estilos.

Linear

Radial

Conic

Ângulo (graus)

Paradas de cor

Posição (%)

Galeria de presets

Prévia

CSS

background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

Como usar

Choose the gradient type: linear, radial, or conic.
Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
The preview pane updates live as you edit.
Copy the generated CSS background value straight into your stylesheet.

Exemplos

Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.

Verifique as saídas antes de usar em produção. Sem garantia — veja Termos.