Diseña un degradado CSS y copia el código
Este generador de degradados CSS crea fondos <code>linear-gradient()</code>, <code>radial-gradient()</code> y <code>conic-gradient()</code> de forma visual. Haz clic en la barra de paradas para añadir colores, arrástralos a su sitio, ajusta la opacidad de cada parada y luego cambia el ángulo, la forma o el centro mientras la vista previa se actualiza al instante. Copia el CSS con un color de respaldo sólido, copia una clase de Tailwind lista para usar o exporta el degradado como PNG a cualquier tamaño. Pega un degradado de tu hoja de estilos para editarlo aquí. Todo se ejecuta localmente en tu navegador.
Cómo crear un degradado CSS
- 1Elige Lineal, Radial o Cónico, o empieza con uno de los ajustes predefinidos.
- 2Haz clic en cualquier punto de la barra para añadir una parada de color, arrastra las paradas para moverlas y pulsa Supr sobre una parada enfocada para eliminarla. Las flechas mueven la parada enfocada un 1 %, Shift+flecha un 10 %.
- 3Elige el color y la opacidad de cada parada. Sirve cualquier color CSS: hex,
rgb(),hsl(),oklch()o un nombre de color. - 4Ajusta el ángulo con el dial (mantén Shift para saltar de 15° en 15°) o, en degradados radiales y cónicos, arrastra sobre la vista previa para mover el centro.
- 5Copia el CSS o la clase de Tailwind, o indica un ancho y un alto y descarga un PNG.
Degradados lineales, radiales y cónicos
- linear-gradient()
- Los colores cambian a lo largo de una línea recta con un ángulo. <code>0deg</code> apunta hacia arriba, <code>90deg</code> hacia la derecha; las palabras clave <code>to right</code> y <code>to bottom left</code> dicen lo mismo con palabras. La línea del degradado es justo lo bastante larga para que las esquinas reciban el primer y el último color.
- radial-gradient()
- Los colores se expanden desde un centro en forma de círculo o elipse. La palabra clave de tamaño decide dónde cae el 100 %: <code>farthest-corner</code> (por defecto) llega a la esquina más lejana de la caja, <code>closest-side</code> se detiene en el borde más cercano.
- conic-gradient()
- Los colores giran alrededor de un centro como las agujas de un reloj, empezando en el ángulo <code>from</code>. Con paradas duras puedes hacer gráficos circulares y ruedas de color sin imágenes.
Paradas de color, bordes duros y transparencia
Cada parada de color es un color y una posición. Entre dos paradas el navegador mezcla suavemente; cuando dos paradas comparten posición, el color cambia de golpe, y así se dibujan rayas, banderas y gráficos circulares. Da el mismo color a dos paradas vecinas para mantenerlo como una franja sólida.
Las paradas pueden ser parcialmente transparentes, así que un degradado puede fundir una imagen con la página u oscurecer la parte inferior de una imagen de portada para que el texto blanco se lea bien. Los navegadores modernos mezclan las paradas transparentes en color premultiplicado, por lo que difuminar a transparent ya no se vuelve gris en el centro, pero el generador sigue escribiendo el color rgba() explícito para mayor claridad.
Degradados repetidos
repeating-linear-gradient() y sus equivalentes radial y cónico repiten el patrón entre la primera y la última parada por toda la caja. Activa Repetir y mueve la última parada bastante antes del 100 %, por ejemplo al 10 %, para obtener rayas, anillos o rayos de sol. Si la última parada está en el 100 %, un degradado repetido se ve exactamente igual que uno normal.
Color de respaldo, Tailwind y exportación PNG
Los degradados son imágenes, así que un navegador que no puede dibujarlos no muestra nada detrás de tu texto. La línea de respaldo opcional define primero un background sólido con el promedio de tus paradas, y la línea del degradado que va después lo sustituye allí donde los degradados funcionan.
La salida de Tailwind es una clase de valor arbitrario como bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Los espacios se convierten en guiones bajos porque los nombres de clase de Tailwind no admiten espacios; funciona en Tailwind 3 y 4 sin configuración.
La exportación PNG pinta el mismo degradado en un canvas al tamaño que elijas, hasta 8192 píxeles por lado, para fondos de pantalla, imágenes para redes sociales o herramientas de diseño que no leen CSS. Elige colores que combinen con tu texto con el comprobador de contraste, conviértelos entre notaciones con el conversor de colores o añade profundidad con el generador de box-shadow.
Editar un degradado existente
Pega un degradado en Importar: un linear-gradient(…) suelto, una declaración completa background: o background-image:, una versión con prefijo -webkit- o una clase de Tailwind bg-[…]. Se leen direcciones como to top right, ángulos en deg, turn o rad, paradas con dos posiciones y paradas sin posición. Las posiciones en píxeles y las pistas de color no se pueden mostrar en una barra de porcentajes, así que se aproximan y la importación te lo indica.
Preguntas frecuentes
- ¿Cómo hago un fondo degradado en CSS?
- Asigna a background (o background-image) una función de degradado, por ejemplo background: linear-gradient(90deg, #ff7e5f, #feb47b);. Este generador escribe esa línea por ti, con un color de respaldo sólido opcional antes.
- ¿Qué diferencia hay entre degradados lineales, radiales y cónicos?
- Un degradado lineal cambia de color a lo largo de una línea recta, uno radial se expande desde un centro en círculos o elipses y uno cónico gira alrededor de un centro como la aguja de un reloj.
- ¿Cómo hago un borde duro o rayas?
- Pon dos paradas en la misma posición con colores distintos. Para rayas repetidas, activa Repetir y coloca la última parada en un valor pequeño, como el 10 %.
- ¿Un degradado CSS puede ser transparente?
- Sí. Baja la opacidad de una parada y el generador la escribe como rgba(). Un degradado de un color a transparente es una forma habitual de fundir una imagen o una capa con la página.
- ¿Cómo uso un degradado en Tailwind CSS?
- Copia la clase de Tailwind, un valor arbitrario como bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], y añádela a tu elemento. Las utilidades from-/via-/to- de Tailwind solo cubren degradados lineales sencillos; el valor arbitrario admite cualquier degradado.
- ¿Los degradados cónicos funcionan en todos los navegadores?
- conic-gradient() funciona en todas las versiones actuales de Chrome, Edge, Firefox y Safari. Añade el color de respaldo si aún das soporte a navegadores muy antiguos.
- ¿Puedo descargar el degradado como imagen?
- Sí. Indica un ancho y un alto y descarga un PNG. La imagen se dibuja en tu navegador exactamente a ese tamaño, hasta 8192 × 8192 píxeles.
- ¿Se sube algo?
- No. La vista previa, el CSS y la exportación PNG se generan en tu navegador.