Gerador de gradiente CSS
Crie gradientes CSS lineares ou radiais com 2 a 10 paradas de cor, controles de ângulo, transparência e predefinições. Pré-visualize o resultado e copie ou baixe o CSS.
Também conhecido comogradiente CSS · gerador de gradiente · gradiente CSS gerador · CSS gradient generator · degradê CSS · gerador de gradiente de cores
De 2 a 10 paradas, ordenadas por porcentagem na saída. Posições iguais criam uma borda dura e mantêm a ordem listada. A transparência é mostrada sobre um quadriculado. Os canais de cor usam sRGB de 8 bits; o alfa decimal é preservado na saída RGBA.
Três pequenos passos.
- Escolha linear ou radial e comece com uma predefinição ou com suas próprias cores.
- Edite as cores e as porcentagens das paradas, adicione ou remova paradas, ou inverta-as.
- Confira a pré-visualização e, depois, copie o fundo CSS ou baixe uma folha de estilos.
Algumas coisas para saber.
Aceita nomes de cores CSS padrão, cores numéricas HEX/RGB/HSL e posições de parada de 0 a 100%. As paradas são ordenadas por posição; posições iguais mantêm a ordem em que foram listadas e podem criar bordas duras. Os gradientes radiais usam um círculo no centro. A interpolação de cores do navegador e as telas de exibição podem variar; este não é um fluxo de trabalho de cores para impressão.
Como funciona a sua privacidade →Um pouco mais de clareza.
Um gradiente pode esmaecer até a transparência?
Sim. Use um componente alfa, como #294C3900 ou rgba(41,76,57,0). O quadriculado da pré-visualização mostra as regiões transparentes.
O que a inversão faz?
Ela inverte a lista de paradas e mapeia cada posição para 100 menos a porcentagem original. Isso também inverte a ordem das cores nas bordas duras.
Pesquisas relacionadasgradiente linear css · gerador de gradiente online