Gerador de Gradientes

Crie gradientes lineares, radiais ou cônicos, adicione pontos de cor, defina a direção e copie o CSS com um único clique.

Tipo de gradiente
Pontos de cor
CSS
Ajuste os pontos e a direção para moldar o seu gradiente.

Cada gradiente é renderizado diretamente no seu navegador. Nada do que definir aqui é carregado para o BroBroGo.

Perguntas Frequentes

Qual é a diferença entre gradientes lineares, radiais e cônicos?

Um gradiente linear mistura as cores ao longo de uma linha reta que direciona com um ângulo. Um gradiente radial espalha-as para fora a partir do centro em formato de círculo ou elipse. Um gradiente cônico gira as cores ao redor do centro, como num círculo cromático.

O que são pontos de cor (color stops)?

Cada ponto de cor (color stop) é uma cor fixada numa posição ao longo do gradiente — 0% no início, 100% no fim. Mova um ponto para mudar onde a cor atinge o seu pico ou adicione mais pontos para uma mistura mais rica. Pode usar até oito pontos.

Como controlo a direção?

Para gradientes lineares ou cônicos, o controlo de ângulo define a direção — 0° aponta para cima, 90° para a direita. Gradientes radiais não possuem ângulo; em vez disso, escolha o formato de círculo ou elipse para alterar a forma como se espalha.

Gerador de Cubic Bezier CSSArraste as duas alças para criar uma curva de transição, veja o movimento em tempo real comparado com uma velocidade constante e copie o valor de cubic-bezier().Gerador de Box ShadowArraste os controlos para criar sombras box-shadow, empilhe camadas para dar profundidade e copie o CSS pronto instantaneamente.Gerador de Border RadiusArredonde cada canto com controlos deslizantes, crie gotas orgânicas com o modo elíptico e copie o CSS instantaneamente.Gerador de FlexboxConfigure um contentor flex e os seus itens com controlos visuais, veja o layout reagir em tempo real e copie o CSS com um único clique.Gerador de CSS GridDefina as suas colunas e linhas, arraste pelas células para posicionar os itens e copie o CSS do grid com o HTML correspondente num único clique.Calculadora de clamp() CSSIntroduza um tamanho para ecrãs pequenos e grandes e obtenha um valor clamp() fluido que escala suavemente entre eles — para fontes, paddings, margins ou gaps.Conversor de CoresConverta cores entre HEX, RGB, HSL, HSV, CMYK e LAB — edite qualquer campo e os outros mudam na hora.Formatador e Minificador de CSSOrganize códigos CSS complexos para facilitar a leitura ou minifique-os para publicação — com um modo seguro que nunca altera a ordem das suas regras.Verificador de ContrasteIntroduza uma cor de texto e de fundo para ver a proporção de contraste WCAG e quais os níveis AA e AAA aprovados.