Cual es la diferencia entre un degradado lineal y uno radial?

Un degradado lineal mezcla los colores a lo largo de una linea recta segun el angulo que definas, mientras que un degradado radial extiende los colores hacia afuera desde un punto central. Cambia el tipo para ver como se actualiza cada uno en la vista previa.

Funciona el control deslizante de angulo para los degradados radiales?

El control deslizante de angulo controla la direccion de un degradado lineal. En los degradados radiales los colores se extienden desde el centro, por lo que el angulo no tiene efecto visible, pero los dos selectores de color siguen aplicandose.

Como uso el CSS generado en mi proyecto?

Copia la regla generada y pegala en tu hoja de estilos en el elemento que quieras, por ejemplo como una propiedad background. No se necesitan librerias ni importaciones adicionales.

Generador de Degradados CSS

Tipo

Ángulo: 90deg

Color 1

Color 2

CSS

.element {
  background: linear-gradient(90deg, #2b59ff, #ff5e9c);
}

Que hace esta herramienta

El Generador de Degradados CSS te ayuda a disenar un degradado de dos colores y te da el CSS exacto para pegar en tu proyecto. Es util para desarrolladores frontend, disenadores y cualquier persona que construya una pagina de aterrizaje, un boton, una tarjeta o una seccion hero y quiera un fondo limpio sin escribir la sintaxis a mano. Ves el resultado mientras lo ajustas, asi que no hay que adivinar como quedara el degradado final.

Como usarla

Elige el tipo de degradado, lineal o radial, para definir como se mezclan los colores.
Arrastra el control deslizante de angulo para rotar la direccion de un degradado lineal.
Selecciona tu primer color con el selector de color.
Selecciona tu segundo color con el segundo selector de color.
Observa como la vista previa en vivo y el codigo CSS se actualizan al instante cuando cambias cualquier control.
Copia la regla generada, como una linea background: linear-gradient(…), y pegala en tu hoja de estilos.

Un ejemplo rapido

Configura el tipo como lineal, arrastra el angulo a 90 grados y luego elige un purpura intenso y un azul suave. La vista previa muestra una mezcla de izquierda a derecha y el codigo te da algo como background: linear-gradient(90deg, #7c3aed, #60a5fa). Pega eso en un boton o una seccion y listo. Si un degradado se ve plano, prueba a elegir dos colores que esten mas separados en la rueda de color para lograr mas contraste.

Todo se ejecuta directamente en tu navegador, asi que tus colores permanecen privados, no se sube nada y la herramienta es completamente gratuita y sin registro.

Preguntas frecuentes

Cual es la diferencia entre un degradado lineal y uno radial?: Un degradado lineal mezcla los colores a lo largo de una linea recta segun el angulo que definas, mientras que un degradado radial extiende los colores hacia afuera desde un punto central. Cambia el tipo para ver como se actualiza cada uno en la vista previa.
Funciona el control deslizante de angulo para los degradados radiales?: El control deslizante de angulo controla la direccion de un degradado lineal. En los degradados radiales los colores se extienden desde el centro, por lo que el angulo no tiene efecto visible, pero los dos selectores de color siguen aplicandose.
Como uso el CSS generado en mi proyecto?: Copia la regla generada y pegala en tu hoja de estilos en el elemento que quieras, por ejemplo como una propiedad background. No se necesitan librerias ni importaciones adicionales.