Gradientes

· · · · · · · ·

Código Rápido

Copiar para a área de transferências

<div style="background: linear-gradient(to right, #00a8eb, white);">O texto vai aqui</div>

Os gradientes também são conhecidos como efeito ombré, que são cores que se transformam gradativamente em cores diferentes.

Os gradientes são usados para texto ou planos de fundo e podem usar cores básicas, como códigos hexadecimais e RGB/RGBA para especificação de cores.

Gradiente de fundo

Gradiente Linear (com div)

Os gradientes lineares vão de cima para baixo, da esquerda para a direita e vice-versa. Exemplo de código:

<div style="background: linear-gradient(to left, #f4f4e5, #d2d2d2);">O texto vai aqui</div>

Você pode alterar a quantidade de cores ou a direção que aponta substituindo o 'to left' (para esquerda) por 'to right' (para direita) ou outra especificação de direção. Ao alterar os códigos que começam com #, você altera as cores do gradiente.

Exemplos

• Black/Gray:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, black, white); color: white;">O texto vai aqui</div>

• White/Gray:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #f4f4e5 0%, #d2d2d2 100%)">O texto vai aqui</div>

• LightPink/LightGreen:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, lightpink 0%, lightgreen 100%)">O texto vai aqui</div>

• Blue/White:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #b0e0e6 0%, white 100%)">O texto vai aqui</div>

• PastelGreen/LightGreen:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #aef5b7 0%, #e2f5ae 100%)">O texto vai aqui</div>

• Red/Orange:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #e55d5d 0%, #f2cf79 100%)">O texto vai aqui</div>

• Dark/LightPurple:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #5750a5 0%, #cfc4ff 100%); color:white;">O texto vai aqui</div>

• Yellow/Green:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #f1f44b 0%, #9ce359 100%)">O texto vai aqui</div>

• Magenta/DarkCyan:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, magenta, darkcyan)">O texto vai aqui</div>

• MediumSpringGreen/SpringGreen:

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, mediumspringgreen, springgreen)">O texto vai aqui</div>

• DeepPink/Lime/Cyan

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, deeppink, lime, cyan)">O texto vai aqui</div>

• NeonPurple/NeonPink

O texto vai aqui

Código:

<div style="background: linear-gradient(to right, #b026ff, #ff44cc);color:white">O texto vai aqui</div>

Gradiente radial (com div)

Um gradiente radial tem padrões circulares. Abaixo estão alguns exemplos:

<div style="background:radial-gradient(color, color, color);">O texto vai aqui. Você pode alterar a quantidade de cores ou a direção que aponta.</div>

Exemplos

• Silver/Gray:

O texto vai aqui

Código:

<div style="background:radial-gradient(gray,silver);">O texto vai aqui</div>

• Purple/Violet/Pink:

O texto vai aqui

Código:

<div style="background:radial-gradient(purple,darkviolet,deeppink);color:white;">O texto vai aqui</div>

• Blue/DarkBlue:

O texto vai aqui

Código:

<div style="background:radial-gradient(blue,darkblue);color:white;">O texto vai aqui</div>

• Aqua/Yellow:

O texto vai aqui

Código:

<div style="background:radial-gradient(aqua, yellow);">O texto vai aqui</div>

• Lime/Cyan:

O texto vai aqui

Código:

<div style="background:radial-gradient(lime, cyan);">O texto vai aqui</div>

• Orange/Black:

O texto vai aqui

Código:

<div style="background:radial-gradient(orange,black);color:white">O texto vai aqui</div>

Gradiente cônico (com div)

Um gradiente cônico tem padrões cônicos. Abaixo estão alguns exemplos:

<div style="background:conic-gradient(color, color, color);">O texto vai aqui. Você pode alterar a quantidade de cores ou a distância entre elas.</div>

Exemplos

• Black/Gray:

O texto vai aqui

Código:

<div style="background: conic-gradient(black, white); color: white;">O texto vai aqui</div>

• White/Gray:

O texto vai aqui

Código:

<div style="background: conic-gradient(#f4f4e5 0%, #d2d2d2 100%)">O texto vai aqui</div>

• Azure/Powderblue

O texto vai aqui

Código:

<div style="background: conic-gradient(azure,powderblue)">O texto vai aqui</div>

• Wheat/Tan

O texto vai aqui

Código:

<div style="background: conic-gradient(wheat,tan)">O texto vai aqui</div>

Gradiente de realce

Gradiente linear (com span)

Os gradientes lineares vão de cima para baixo, da esquerda para a direita e vice-versa. Alguns exemplos:

<span style="background: linear-gradient(to right, color, color, color);">O texto vai aqui. Você pode alterar a quantidade de cores ou a direção que aponta.</span>

Exemplos

• Black/Gray:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, black, white); color: white;">O texto vai aqui</span>

• White/Gray:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #f4f4e5 0%, #d2d2d2 100%)">O texto vai aqui</span>

• PastelBlue/Pink:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #f5aeae 0%, #aef5cd 100%)">O texto vai aqui</span>

• Blue/White:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #b0e0e6 0%, white 100%)">O texto vai aqui</span>

• PastelGreen/LightGreen:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #aef5b7 0%, #e2f5ae 100%)">O texto vai aqui</span>

• Red/Orange:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #e55d5d 0%, #f2cf79 100%)">O texto vai aqui</span>

• DarkPurple/LightPurple:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #5750a5 0%, #cfc4ff 100%); color:white;">O texto vai aqui</span>

• Yellow/Green:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, #f1f44b 0%, #9ce359 100%)">O texto vai aqui</span>

• Magenta/DarkCyan:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, magenta, darkcyan)">O texto vai aqui</span>

• ForestGreen/LawnGreen:

O texto vai aqui

Código:

<span style="background: linear-gradient(to right, forestgreen, lawngreen)">O texto vai aqui</span>

Gradiente radial (com span)

Um gradiente radial tem padrões circulares. Abaixo estão alguns exemplos:

<span style="background:radial-gradient(color, color, color)>O texto vai aqui. Você pode alterar a quantidade de cores.</span>

Exemplos

• Silver/Gray:

O texto vai aqui

Código:

<span style="background:radial-gradient(gray,silver);">O texto vai aqui</span>

• Purple/Violet/Pink:

O texto vai aqui

Código:

<span style="background:radial-gradient(purple,darkviolet,deeppink);">O texto vai aqui</span>

• Blue/DarkBlue:

O texto vai aqui

Código:

<span style="background:radial-gradient(blue,darkblue);color:white;">O texto vai aqui</span>

• Aqua/Yellow:

O texto vai aqui

Código:

<span style="background:radial-gradient(aqua, yellow);">O texto vai aqui</span>

• Lime/Cyan:

O texto vai aqui

Código:

<span style="background:radial-gradient(lime, cyan);">O texto vai aqui</span>

• Orange/Black:

O texto vai aqui

Código:

<span style="background:radial-gradient(orange,black);color:white">O texto vai aqui</span>

Gradiente de Texto

Para alterar a cor do seu texto com um gradiente de fundo, o código que você pode usar é:

-webkit-background-clip:text !important; -webkit-text-fill-color:transparent;

Você deve incluir isso para que as cores grudem no seu texto!

Exemplo:

<span style="background:linear-gradient(90deg,navy,cyan,blue,cyan,blue,navy); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent;">Seu texto aqui</span>

Resultado

Gradiente de Borda

Os gradientes de borda são semelhantes às bordas de vários estilos (consulte Borda), mas use gradientes. Primeiro, adicione uma borda:

border:_px solid

Então você pode adicionar o gradiente!

border:_px solid; border-image: linear-gradient(to top left, color, color) 1;

Veja, veja como a borda é um gradiente!

Você também pode ver como fazer uma borda de gradiente arredondada aqui!

Adição de pixels

O atributo de pixel determina em qual pixel específico você deseja que uma cor deixe de ser sólida. Comece com um código de gradiente como esse:

<div style="background:linear-gradient(to left, blue, cyan);">Insira texto aqui</div>

Dando-lhe isso

Em seguida, adicione _px ao final das cores diferentes, o que mudará onde começa a se misturar!

<div style="background:linear-gradient(to left, blue 100px, cyan 200px);">Insira seu texto aqui</div>

Veja como agora há mais ciano?

Cores sólidas

Você também pode criar seções sólidas com gradientes usando pixels. Comece com o código de gradiente básico. Exemplo:

<div style="background:linear-gradient(to right, white, blue);">Insira texto aqui</div>

Aqui combina normalmente

Em seguida, adicione quantidades de pixels que sejam exatamente iguais entre si, para que não possam se misturar

<div style="background:linear-gradient(to right, white 40px, blue 40px)">Insira texto aqui</div>

Agora não combina mais!

Também funciona com gradientes radiais:

<div style="background: radial-gradient (white 10px, blue 10px);>Insira texto aqui</div>

Insira
texto
aqui

Você também pode continuar adicionando cores, mas é um pouco mais complicado. Agora, a maioria das cores terá que ser duplicada e ter a mesma quantidade de pixels da cor diferente ao lado delas. Veja abaixo um exemplo visual:

<div style="background: linear-gradient(red 20px, orange 20px, orange 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px, indigo 100px, indigo 120px, purple 120px, purple 140px);">Insira seu texto aqui</div>

Texto aqui

Para criar padrões precisos, o componente de pixel funciona melhor quando usado com uma altura/largura fixa em mente, dependendo da direção do padrão.

Adição Percentual

A adição de porcentagem às cores funciona de maneira semelhante à adição de pixels vista acima, mas você não precisa ter uma altura/largura exata em mente para que os padrões específicos funcionem; em vez disso, divide com base em porcentagens do tamanho total. Por exemplo:

<div style="background: linear-gradient(to right, red 0%, pink 100%);">Insira texto aqui</div>

^^
Este código lhe dará um gradiente normal

<div style="background: linear-gradient(to right, red 50%, pink 50%);">Insira texto aqui</div>

^^
Este código fornecerá cores divididas uniformemente

Mexa com os números e quantidades de cores para obter resultados diferentes!

O texto vai aqui