Gerador de UUID
Gere UUIDs aleatórios em lote.
Gerador de gradiente CSS
Crie um gradiente linear, radial ou cônico e copie o CSS.
Pontos de cor
0%
100%
Seus arquivos ficam no seu dispositivo
Como funciona
- 1Escolha linear, radial ou cônico.
- 2Defina o ângulo ou, no radial, o formato.
- 3Escolha as cores e arraste cada ponto até a posição dele. Adicione pontos com Adicionar ponto de cor.
- 4Copie o CSS e cole na sua folha de estilos.
O que cada opção faz
- Linear
- As cores se misturam ao longo de uma linha reta. O ângulo define a direção: 0 grau vai para cima, 90 vai para a direita, 180 vai para baixo.
- Radial
- As cores se espalham a partir do centro, como um círculo ou uma elipse.
- Cônico
- As cores giram em torno do centro como uma roda de cores ou um gráfico de pizza. O ângulo gira o início.
- Pontos de cor
- Cada ponto é uma cor em uma posição de 0 a 100 por cento. No máximo oito.
Privacidade
Tudo roda no seu navegador. Nada do que você digita é enviado a um servidor.
Perguntas frequentes
Quais navegadores aceitam esses gradientes?
Gradientes lineares e radiais funcionam em todos os navegadores atuais. Gradientes cônicos funcionam em todas as versões atuais do Chrome, Edge, Firefox e Safari.
Como faço uma borda nítida em vez de uma mistura?
Coloque dois pontos na mesma posição, por exemplo vermelho em 50% e azul em 50%. Não há distância de mistura entre eles, então a mudança é brusca.
Posso usar como cor de texto ou borda?
Sim. Use o mesmo valor em background-image, junto com background-clip: text para texto, ou border-image para bordas.
Por que a página mostra uma cor diferente da que escolhi?
O seletor de cores usa valores hex sRGB. Telas com gama de cores ampla podem exibi-las de forma um pouco diferente, mas os valores CSS são exatos.
Como adiciono transparência?
Esta ferramenta gera cores hex sólidas. Edite o código e troque uma cor por um hex de oito dígitos como #4f46e580, ou por rgba().