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