Ir al contenido
Rotina Diária

Generador de gradientes CSS

Crea gradientes lineales, radiales y cónicos con varios colores y copia el código CSS listo para usar.

Colores y posiciones

Sugerencias

Procesado en tu dispositivo. Nada de lo que escribes se envía.

Cómo usar: Generador de gradientes CSS

  1. Elige el tipo de gradiente: lineal, radial o cónico.
  2. Ajusta los colores, las posiciones y el ángulo, o elige una sugerencia.
  3. Copia el CSS y pégalo en la propiedad background de tu elemento.

Acerca de esta herramienta

El código generado incluye un color sólido antes del gradiente como alternativa para navegadores muy antiguos. Los gradientes CSS se dibujan en el navegador, no ocupan espacio como las imágenes y se adaptan a cualquier tamaño de pantalla.

Para conseguir una transición suave entre colores muy distintos, añade un color intermedio: la transición directa entre colores complementarios (como el azul y el naranja) suele pasar por un tono grisáceo.

Preguntas frecuentes

¿Cuál es la diferencia entre un gradiente lineal, radial y cónico?

El gradiente lineal cambia de color a lo largo de una línea (según un ángulo); el radial se extiende desde un punto central en forma de círculo o elipse, y el cónico gira alrededor del centro, como un gráfico circular.

¿Funciona en todos los navegadores?

Sí. linear-gradient y radial-gradient funcionan en todos los navegadores actuales; conic-gradient es compatible con las versiones modernas de Chrome, Edge, Firefox y Safari.

¿De verdad es gratis? ¿Hay un límite diario?

Es gratis y no tiene límite diario. Como el procesamiento se realiza en tu dispositivo, no tenemos costos por uso ni necesitamos limitarte.

¿Funciona en el celular?

Sí. El sitio funciona en cualquier navegador moderno en Android, iPhone, Windows, Mac y Linux, sin instalar nada.

Herramientas relacionadas

Ver todo — Herramientas relacionadas
Conversor de colores Convierte colores entre HEX, RGB, HSL, HSV y CMYK, y comprueba el contraste WCAG entre dos colores. Minificar CSS, HTML y JSON Reduce el tamaño de CSS, HTML y JSON al quitar comentarios y espacios sin alterar su funcionamiento. Generador de códigos QR Crea códigos QR para enlaces, Wi-Fi, WhatsApp, correo electrónico y texto. Crear ZIP Combina varios archivos de cualquier tipo en un único archivo .zip comprimido, directamente en el navegador. Extraer ZIP Abre archivos .zip sin instalar nada: consulta su contenido y descarga solo los archivos que quieras. Formatear JSON Formatea, valida y minifica JSON con resaltado de errores. Codificar y decodificar Base64 Convierte texto o archivos a Base64 y viceversa. Generador de UUID Genera UUID v4 y v7 en lote, con o sin guiones.