Gradient Generator
Gradient Generator — se ejecuta en el navegador. No se guardan datos.
Generador de degradado
Introduce los valores y pulsa Calcular.
Vista previa
Genera CSS linear-gradient en tiempo real. Se requieren al menos dos colores.
Cómo usar
- Elige un tipo (lineal o radial), una dirección y al menos dos colores.
- Usa Añadir color / Quitar color para cambiar el número de paradas. Se requieren dos o más colores.
- Revisa la vista previa en vivo y copia el CSS
backgroundcon Copiar. - Restablecer recupera el degradado lineal de dos colores predeterminado.
Conceptos clave
Un degradado CSS es una imagen de fondo, no un background-color sólido. Los lineales siguen un ángulo o una palabra clave como to right; los radiales se expanden desde el centro. Cada parada extra añade un color a lo largo de esa ruta. El generador emite una sola declaración background para pegar en la hoja de estilos. No genera reglas hover, animación ni prefijos de fabricante.
Las paradas duras (dos colores en el mismo porcentaje) se ven como franjas. Las mezclas suaves usan porcentajes distintos. Hex y RGB del selector funcionan igual. La generación es solo en el navegador. Para transparencia, edita el CSS copiado a rgba/hsla: el selector suele ser hex opaco.
Ejemplo
Un degradado lineal de #4f46e5 a #06b6d4 hacia la esquina inferior derecha es un fondo de héroe habitual. Añade una parada media al 50% para una mezcla de tres colores. Copia el valor tras background: y úsalo tal cual. Las secciones héroe suelen quedar bien cerca de 135deg sobre una superposición de foto. En botones, 180deg (un poco más claro arriba) es un patrón común. Al reintentar la misma entrada, restablece primero para no mezclar la salida anterior. En un equipo compartido, vacía los campos al terminar. Cerrar la pestaña descarta lo pegado; no hace falta pedir un borrado al servidor. Los nombres de botón coinciden con la herramienta de la parte superior. Si el resultado está vacío, revisa los campos obligatorios y que no haya un error oculto.
Relacionado: Generador de box shadow · Selector de color
Preguntas frecuentes
¿Puedo hacer un degradado repetido o cónico?
Esta versión genera CSS lineal y radial. No incluye sintaxis repeating ni conic.
¿Cuántos colores puedo añadir?
Usa Añadir color para añadir paradas. Se requieren al menos dos colores.
¿Copiar incluye el nombre de la propiedad?
Copia una declaración completa <code>background: ...;</code>. Si solo necesitas la función, borra el nombre de la propiedad después de pegar.
¿Se añaden prefijos de fabricante?
No. Los navegadores modernos entienden <code>linear-gradient</code> / <code>radial-gradient</code> estándar.
¿Se guarda el CSS en un servidor?
No. Se genera solo en el navegador.
¿Puedo usar colores transparentes?
El hex del selector suele ser opaco. Para alfa, pega rgba/hsla en la hoja de estilos después de copiar.
Última revisión: 2026-09-04