Gradientes em CSS

Gradientes em CSS

Gradientes são uma técnica popular em design para criar transições suaves entre duas ou mais cores. Em CSS, é possível aplicar gradientes a fundos, bordas e textos. Existem dois tipos de gradientes em CSS: linear e radial.

Gradiente Linear

O gradiente linear é uma transição de cor que ocorre em uma linha reta. Para criar um gradiente linear em CSS, é necessário definir a direção do gradiente (de cima para baixo, da esquerda para a direita, diagonalmente etc.), as cores e as posições das cores no gradiente.

Por exemplo, para criar um gradiente linear que vá do vermelho ao azul, de cima para baixo, o código CSS seria:

background: linear-gradient(to bottom, red, blue);

O código acima define que o gradiente deve ir "to bottom" (de cima para baixo), e as cores "red" (vermelho) e "blue" (azul) são as cores do gradiente.

Também é possível definir posições para as cores do gradiente. Por exemplo, para criar um gradiente que vá do vermelho ao azul, de cima para baixo, mas com uma faixa amarela no meio, o código CSS seria:

background: linear-gradient(to bottom, red, yellow 50%, blue);

O código acima define que a cor "yellow" (amarelo) deve ser aplicada na posição 50% do gradiente.

Gradiente Radial

O gradiente radial é uma transição de cor que ocorre em um círculo. Para criar um gradiente radial em CSS, é necessário definir o ponto central do gradiente, o tamanho do gradiente e as cores e posições das cores no gradiente.

Por exemplo, para criar um gradiente radial que vá do vermelho ao azul, com um ponto central no meio do elemento, o código CSS seria:

background: radial-gradient(circle at center, red, blue);

O código acima define que o gradiente deve ser um "circle" (círculo) com um ponto central no "center" (meio) do elemento, e as cores "red" (vermelho) e "blue" (azul) são as cores do gradiente.

Também é possível definir o tamanho do gradiente, por exemplo, para criar um gradiente radial que vá do vermelho ao azul, com um ponto central no meio do elemento e um tamanho de 50%, o código CSS seria:

background: radial-gradient(circle at center, red, blue 50%);

O código acima define que o gradiente deve ser um "circle" (círculo) com um ponto central no "center" (meio) do elemento, e a cor "blue" (azul) deve ser aplicada na posição 50% do gradiente.

Conclusão

Gradientes em CSS são uma técnica poderosa para criar transições suaves entre duas ou mais cores. Com a capacidade de aplicar gradientes a fundos, bordas e textos, é possível criar designs interessantes e atraentes. Experimente diferentes direções, cores e posições para criar gradientes únicos e personalizados.

Próxima página do Ebook Gratuito:

10Fontes em CSS

4 minutos