Gerador de degradê CSS (camadas, repetição)
Crie degradês lineares, radiais e cônicos, empilhe várias camadas, arraste pontos de cor, defina ângulo, centro, transparência e repetição e copie o CSS
Carregando a ferramenta…
Monta um fundo com até quatro degradês lineares, radiais ou cônicos empilhados e entrega o CSS de background-image. Camadas translúcidas criam efeitos de luz ou de malha, a repetição cria listras e anéis, e a imagem pode ser salva como PNG.
Como usar
- Comece por um cartão de “Predefinições” ou pela configuração inicial. Em “Camadas”, selecione a camada que deseja editar e defina “Tipo”, “Ângulo” e “Repetir”.
- Nas camadas radiais e cônicas, clique ou arraste na pré-visualização para mover o centro e escolha “Forma” e “Tamanho”.
- Clique na barra “Pontos de cor” para adicionar um ponto e arraste um círculo para movê-lo. Abaixo, ajuste a cor, a “Opacidade”, a “Posição” e o “Ponto médio” do ponto selecionado.
- Pressione “Adicionar camada” para empilhar uma camada translúcida por cima; reordene as camadas ou pressione “Ocultar” para comparar.
- Pressione “Copiar” ao lado do CSS, ou escolha um “Tamanho do PNG” e pressione “Salvar como PNG”.
Como funciona
- A saída é uma única declaração background-image; as camadas são pintadas de cima para baixo na ordem do CSS. Cores translúcidas são escritas como rgb(r g b / a).
- O ponto médio é a dica de transição do CSS que desloca o lugar em que dois pontos se misturam meio a meio. A repetição repete o trecho do primeiro ao último ponto, como repeating-linear-gradient.
- Os ângulos e as palavras-chave de tamanho radial seguem a CSS Images 3, e as cores são misturadas em sRGB, como os navegadores fazem por padrão. O PNG é desenhado no navegador com as mesmas regras.
- Suas camadas e pontos ficam salvos neste navegador.
Perguntas frequentes
- Como empilho vários degradês em CSS?
- Liste-os em background-image separados por vírgulas. O primeiro é pintado por cima, por isso as camadas superiores precisam de alguma transparência. A caixa de CSS escreve nesse formato.
- Como faço um fundo listrado?
- Ative “Repetir” e coloque dois pontos da mesma cor na mesma posição para obter uma borda nítida. A predefinição “Listras” é um bom começo.
- O meio do meu degradê parece sujo. O que posso fazer?
- Ative “Ponto médio” para deslocar o ponto de mistura, ou adicione no meio um ponto com a cor desejada. Cores complementares misturadas ficam cinza.
- A pré-visualização e o PNG podem ser diferentes?
- A pré-visualização é desenhada pelo navegador a partir do CSS; o PNG é calculado com as mesmas regras. Fora o arredondamento, os dois coincidem.