Ferramenta de gradiente CSS online
CSS Gradient é um pequeno site feliz e uma ferramenta gratuita que permite criar um fundo gradiente para sites.
Os gradientes CSS permitem que você exiba transições suaves entre duas ou mais cores especificadas.
CSS define dois tipos de gradientes:
- Gradientes lineares (desce / sobe / esquerda / direita / diagonalmente)
- Gradientes radiais (definidos por seu centro)
Gradientes Lineares CSS
Para criar um gradiente linear, você deve definir pelo menos duas interrupções de cor. As paradas de cor são as cores entre as quais você deseja renderizar transições suaves. Você também pode definir um ponto inicial e uma direção (ou um ângulo) junto com o efeito de gradiente.
Sintaxe
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
