Gerador de Gradientes

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

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

Cada gradiente é renderizado diretamente no seu navegador. Nada do que você define aqui é enviado para o BroBroGo.

FAQ

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

Um gradiente linear mistura as cores ao longo de uma linha reta que você direciona com um ângulo. Um gradiente radial as espalha 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 em um círculo cromático.

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

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

Como controlo a direção?

Para gradientes lineares ou cônicos, o controle 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 como ele 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 a uma velocidade constante e copie o valor de cubic-bezier().Gerador de Box ShadowArraste os controles para criar sombras box-shadow, empilhe camadas para dar profundidade e copie o CSS pronto instantaneamente.Gerador de Border RadiusArredonde cada canto com controles deslizantes, crie gotas orgânicas com o modo elíptico e copie o CSS instantaneamente.Gerador de FlexboxConfigure um contêiner flex e seus itens com controles visuais, veja o layout reagir em tempo real e copie o CSS com um clique.Gerador de CSS GridDefina suas colunas e linhas, arraste pelas células para posicionar os itens e copie o CSS do grid com o HTML correspondente em um clique.Calculadora de clamp() CSSInsira um tamanho para telas pequenas e grandes e obtenha um valor clamp() fluido que escala suavemente entre elas — 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 ContrasteInsira uma cor de texto e de fundo para ver a proporção de contraste WCAG e quais níveis AA e AAA são aprovados.