Crie gradientes CSS visualmente. Defina pontos de cor, opacidade e posições para gradientes lineares, radiais e cônicos e copie o código CSS pronto para uso.
Os gradientes CSS são imagens geradas pelo navegador a partir de uma descrição matemática, e não de um arquivo raster. Os três tipos principais são: linear (transições de cor ao longo de uma linha reta), radial (transições a partir de um ponto central para fora) e cônico (transições em torno de um ponto central, definidas por ângulo). Cada tipo aceita qualquer número de pontos de cor, cada um com um valor opcional de opacidade e uma posição explícita ou automática.
Selecione um tipo de gradiente e, em seguida, configure os pontos de cor usando o seletor de cores e os controles de opacidade. Para gradientes lineares, defina o ângulo ou use um atalho de direção. Para gradientes radiais e cônicos, defina a posição central e o tamanho ou o ângulo inicial. A visualização é atualizada em tempo real. Quando o gradiente estiver do jeito certo, copie a propriedade CSS gerada e cole-a diretamente na sua folha de estilos. Você também pode colar uma sequência de gradiente existente no painel “Importar” para editá-la.
Os gradientes CSS eliminam a necessidade de arquivos de imagem para planos de fundo e elementos decorativos, reduzindo o peso da página e mantendo as cores nítidas em qualquer resolução. Use o controle de opacidade para criar pontos de cor semitransparentes para efeitos de glassmorphism ou para fazer uma cor sólida se desvanecer até ficar transparente. O tipo de gradiente cônico é útil para indicadores de progresso no estilo de gráfico de pizza sem o uso de JavaScript.