Entrada
Preparando seu ambiente de trabalho…
Como usar
- Escolha Linear ou Radial e defina duas cores.
- Ajuste as posições das paradas e o ângulo no modo linear.
- Use Copiar CSS e aplique a declaração background ao elemento.
Controlar um gradiente CSS
Um gradiente CSS cria um fundo com cores em vez de um arquivo de imagem separado. Ele acompanha o tamanho de cards, banners ou seções e continua editável na folha de estilos.
O gerador se concentra em duas cores. Use uma direção linear ou um gradiente radial circular centralizado e posicione as paradas para controlar o início e o fim da transição.
Direção e paradas de cor
O ângulo se aplica ao gradiente linear. O modo radial usa um círculo no centro do elemento e não tem controle de ângulo.
As posições vão de 0% a 100%. Aproximá-las estreita a transição; usar a mesma posição nas duas cria uma divisão abrupta entre as cores.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Gradiente linear de duas paradas com as cores e o ângulo exibidos.
O que a prévia representa
A prévia usa diretamente o CSS gerado. As proporções podem diferir do elemento de destino, principalmente em gradientes radiais.
A primeira parada não pode ficar depois da segunda. Este editor gera uma camada com duas cores; outras paradas e camadas devem ser acrescentadas na folha de estilos.
Aplicar a declaração
A saída copiada começa com background:. Aplique ao seletor correto e confira se substitui imagens, cores ou outras configurações de fundo já existentes.
Entrada de texto de até 1 MiB. Transformações CSS e HTML são executadas em um worker com limite de 30 segundos. As ferramentas de cores usam sRGB; os estilos gerados são prévias e exigem testes no seu próprio layout.
Perguntas frequentes
Posso adicionar uma terceira cor?
Este espaço de trabalho tem duas paradas. Copie o CSS e adicione manualmente outras paradas separadas por vírgulas se precisar.
Por que o modo radial não tem ângulo?
Um gradiente radial circular centralizado se expande do centro para fora. O ângulo só é relevante no gradiente linear.
Posso criar uma divisão sem transição?
Sim. Coloque as duas paradas na mesma posição para eliminar a transição entre elas.
É gerado um arquivo de imagem?
Não. Copiar CSS fornece uma declaração background. O navegador desenha o gradiente quando ela é usada.
Por que o gradiente parece diferente no meu elemento?
O tamanho e as proporções do destino afetam a renderização. Confira no elemento real, e não apenas no card de prévia.