Generador de gradientes CSS (degradados)
Crea degradados CSS lineales y radiales de forma visual y copia el código listo para usar. Añade todos los colores que quieras, ajusta su posición y el ángulo del degradado, y ve el resultado al instante en la vista previa. Genera el «background» con la función linear-gradient o radial-gradient. Todo ocurre en tu navegador, sin conexión ni cuentas.
Cómo crear un gradiente CSS
- Elige el tipo de degradado: lineal o radial.
- Ajusta los colores (con el selector o su código hex) y su posición en porcentaje; añade o quita colores según necesites.
- En los degradados lineales, mueve el control del ángulo para orientar la transición.
- Copia el código CSS con «Copiar» y pégalo en tu hoja de estilos.
Preguntas frecuentes
¿Qué es un gradiente (o degradado) CSS?
Es una transición suave entre dos o más colores que se usa como fondo de un elemento web. En CSS se crea con las funciones linear-gradient (transición en línea recta, con un ángulo) y radial-gradient (transición desde un centro hacia fuera). No es una imagen: lo dibuja el navegador, así que se ve nítido a cualquier tamaño y no pesa nada.
¿Cómo uso el código en mi web?
Copia la línea generada (por ejemplo, «background: linear-gradient(90deg, #12b886 0%, #0b7261 100%);») y pégala en la regla CSS del elemento al que quieras aplicar el fondo. Funciona en cualquier navegador moderno sin prefijos.
¿Cuál es la diferencia entre lineal y radial?
Un degradado lineal hace la transición de color a lo largo de una línea recta, cuya orientación defines con el ángulo (0° es hacia arriba, 90° hacia la derecha). Un degradado radial parte de un punto central y se expande en círculo hacia los bordes.
¿Qué significan las posiciones en porcentaje?
Cada color tiene una posición del 0 % al 100 % que indica en qué punto del recorrido del degradado se sitúa. Con dos colores en 0 % y 100 % la transición es completa; acercándolos entre sí consigues franjas más marcadas, y con varios colores creas paletas de varias bandas.
¿Se sube algo a un servidor?
No. El degradado se genera y se previsualiza por completo en tu navegador; no se envía nada a ningún servidor y la herramienta funciona sin conexión una vez cargada.
¿Puedo usar más de dos colores?
Sí. Puedes añadir varios colores (paradas) y ajustar la posición de cada uno para crear degradados de varias bandas. Para volver a algo simple, elimina los colores que sobren; siempre se mantienen al menos dos.