Herramienta de degradado CSS en línea
CSS Gradient es un pequeño sitio web feliz y una herramienta gratuita que te permite crear un fondo degradado para sitios web.
Los degradados CSS le permiten mostrar transiciones suaves entre dos o más colores especificados.
CSS define dos tipos de degradados:
- Degradados lineales (baja / arriba / izquierda / derecha / diagonalmente)
- Gradientes radiales (definidos por su centro)
Degradados lineales CSS
Para crear un degradado lineal, debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puede establecer un punto de partida y una dirección (o un ángulo) junto con el efecto de degradado.
Sintaxis
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:
