Criador de gradientes CSS
Monte exatamente o gradiente que você quer.
Escolha a geometria, defina paradas de cor e opacidade com precisão e use os mesmos valores na prévia ao vivo e no CSS exportado.
- Posições exatas das paradas
- Paradas duras compatíveis
- Funciona neste navegador
Configurações do gradiente
Cada alteração válida atualiza imediatamente a prévia e o CSS. Valores inválidos continuam editáveis e nunca são corrigidos silenciosamente.
Geometria
Insira um ângulo de 0 a 360.
Use um valor de 0 a 360.
Insira um valor de centro de 0 a 100.
Insira um valor de centro de 0 a 100.
Use valores de 0 a 100 para os centros horizontal e vertical.
Paradas de cor
As posições são ordenadas de 0% a 100% no CSS. Paradas na mesma posição mantêm a ordem da lista para permitir uma transição dura.
-
{{ t('stops.itemTitle', { number: index + 1 }) }}
Insira uma cor HEX como #1F4E79.
Opacidade e posição
%Insira uma opacidade de 0 a 100.
%Insira uma posição de 0 a 100.
Um gradiente precisa de pelo menos duas paradas.