CSS Gradient Generator

Desenha gradients CSS linear, radial e conic com preview ao vivo

🔒 100% no browser🆓 Grátis pra sempre⚡ Sem sign-up
Nota: A interface da ferramenta abaixo por enquanto está só em inglês. Estamos traduzindo uma por uma. Ver essa ferramenta em inglês →
0%
100%

Como funciona

  1. 1
    Escolha tipo de gradient

    Linear, radial ou conic - o preview atualiza na hora.

  2. 2
    Adiciona ou move color stops

    Arrasta os sliders pra reposicionar, click em + pra adicionar mais stops, edita os hex direto.

  3. 3
    Copia o CSS

    Recebe uma declaração 'background: …' pronta pra produção.

Sobre CSS Gradient Generator

CSS gradient generator grátis online. Cria gradients linear, radial ou conic com color stops ilimitados, ajusta ângulos com preview ao vivo e copia CSS pronto pra produção. Roda inteiro no seu browser. CSS Gradient Generator no 712 Tools roda inteiro dentro do seu browser via APIs nativas de JavaScript - nenhum server vê seus dados. Isso significa resultado na hora, privacidade total e nenhum limite de upload.

Seja pra uma sessão de debug, uma checagem rápida ou um incidente em produção, essa ferramenta é grátis e sem limite de uso. Sem watermarks, sem sign-up e sem ads dentro da ferramenta.

Perguntas frequentes

Que browser support têm?

linear- e radial-gradient rodam em todo browser pós-2013. conic-gradient precisa de browser de 2020 pra cá.

Posso usar CSS variables nos stops?

Sim, mas essa tool usa hex pro color picker. Você pode search-replace os hex por var(--seu-token) no CSS copiado.

Como adiciono vários gradients?

Chaineia numa única background property, separados por vírgula. Essa tool monta um por vez - você faz o layer no seu CSS.

Leia mais

5 min de leitura

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

5 min de leitura

Tailwind to plain CSS: migration, extraction, and component patterns

You inherited a Tailwind codebase and want to extract a component library. Or you're moving away from Tailwind entirely. Here's how the utility classes map to real CSS.

4 min de leitura

CSS box-shadow patterns that look professional (not cheap)

A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.

4 min de leitura

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45° angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

Ferramentas relacionadas

Color Converter

Converte entre HEX, RGB, HSL e CMYK com preview ao vivo

Palette Generator

Gera paletas de cores harmoniosas a partir de uma cor base

Box Shadow

Desenha box-shadows CSS multi-layer com preview ao vivo

Contrast Checker

Checa contraste texto/background contra WCAG 2.1 AA e AAA - preview ao vivo

Glassmorphism

Desenha frosted-glass cards CSS com preview ao vivo e código copy-ready

Physics Editor

Editor de hitbox de sprites grátis online - auto-traceia collision polygons e exporta pra Phaser, Matter.js, Rapier ou qualquer engine 2D