# Cómo usar un generador de degradados sin parecerte a todos los demás [Canonical HTML page](https://gradiently.design/es/guide/gradient-generator) Los generadores de degradados son rápidos y útiles, y todos tienden a producir los mismos pocos estilos. La solución no es un generador mejor, sino lo que haces en los cinco minutos siguientes a pulsar el botón. ## The short version - Un generador de degradados elige por ti los colores, la dirección y las paradas, y luego exporta CSS o una imagen. - La mayoría de los resultados se parecen porque comparten los mismos valores por defecto: dos paradas, un ángulo diagonal y colores muy saturados. - Partir de tus propios colores en vez de una paleta aleatoria o de moda es el cambio más importante que puedes hacer. - Añadir una tercera parada, cambiar la interpolación, adaptar la dirección a la composición y sumar grano convierten un resultado genérico en uno específico. - Prueba siempre un degradado generado con texto real y a tamaño real antes de usarlo. Un **generador de degradados** es una herramienta que construye un degradado por ti: eliges o sorteas los colores, fijas una dirección y exporta código CSS o una imagen. Es la forma más rápida de conseguir una mezcla que se vea bien. Y también la razón de que tantas webs, posts y presentaciones compartan los mismos fondos de morado a rosa o de azul a cian. El problema no es el generador. Es quedarse con su primera respuesta. Esta guía explica por qué los resultados de los generadores convergen y repasa seis ajustes que hacen tuyo un resultado. Para algunos necesitarás lo básico de los [degradados lineales en CSS](https://gradiently.design/es/guide/css-linear-gradient). ## Qué hace realmente un generador de degradados La mayoría de los generadores hacen tres cosas. Eligen dos o más colores, ya sea con un selector, con una tirada al azar o desde una biblioteca de paletas populares. Fijan un tipo y una dirección, normalmente lineal con un ángulo. Y escriben el código, por lo común un único valor `linear-gradient()`, a veces con una exportación en PNG o SVG. Algunas herramientas más nuevas hacen degradados de malla o de manchas, y otras aceptan una descripción escrita. Un resultado típico de generador: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` Dos paradas saturadas a 135 grados. Atractivo, y compartido por una enorme cantidad de páginas. ## Por qué todos los resultados de los generadores se parecen - **Dos paradas por defecto.** Las mezclas de dos colores son las más fáciles de generar y las más fáciles de reconocer como genéricas. - **El mismo ángulo.** 135 grados, de arriba a la izquierda a abajo a la derecha, es un valor por defecto habitual y no encaja bien con casi nada en particular. - **Paletas populares.** Las bibliotecas muestran primero las combinaciones más copiadas, así que los degradados más usados se usan todavía más. - **Saturación máxima.** Los selectores aleatorios y los preajustes tienden a los colores vivos, que impresionan en una miniatura y resultan duros detrás de un texto. - **Sin material.** Un degradado desnudo es liso, digital y plano. Casi todos los degradados generados comparten ese acabado. Ninguno de esos puntos es un error por sí solo. Juntos producen un aspecto que es de todos, justo lo contrario de lo que necesita una marca. El [degradado como marca](https://gradiently.design/es/guide/gradient-branding) explica por qué eso importa más allá del gusto. ## Seis ajustes que hacen tuyo un degradado generado 1. **Parte de tus colores** Pega los colores de tu marca, o colores tomados de una foto que te guste, en vez de tirar colores al azar. [Sacar una paleta de una imagen](https://gradiently.design/es/guide/color-palette-from-image) es una buena fuente. 2. **Añade una tercera parada y muévela** Un color intermedio emparentado al 40 % o al 60 %, y no al 50 %, da forma a la mezcla. Ahora la mezcla se inclina, lo que se lee como luz y no como un relleno. 3. **Cambia la interpolación** Mezclar en OKLCH mantiene los colores vivos por el medio y evita las manchas grises. Mira los [degradados en OKLCH](https://gradiently.design/es/guide/css-gradient-oklch). 4. **Adapta la dirección a la composición** Apunta la luz hacia donde está el contenido. Una caída vertical va bien para una historia; un horizonte bajo, para un banner; un resplandor radial, para la foto de un producto. 5. **Añade grano o un material** Una capa de ruido fino oculta las bandas y da textura a la superficie. Es la manera más rápida de pasar de digital a táctil. 6. **Recorta, no te limites a rellenar** Usa un fragmento de un degradado más grande, o amplíalo para que solo se vea una transición suave. Recortar cambia la sensación más que cambiar los colores. - 1. El resultado del generador: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` - 2. Colores propios, 3.ª parada al 60 %: `linear-gradient(135deg, #1e2a5a 0%, #4f46e5 60%, #c084fc 100%)` - 3. OKLCH, cayendo desde arriba: `linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%)` - 4. Rehecho como resplandor bajo: `radial-gradient(circle at 70% 110%, #f0abfc 0%, #4f46e5 35%, #1e2a5a 70%, #0b1026 100%)` Un degradado generado, editado cuatro veces. Cada paso lleva menos de un minuto y lo aleja más de lo genérico. ## De la salida del generador al código de producción Los generadores suelen exportar más de lo que necesitas, o menos. Revisa el código antes de pegarlo: los navegadores modernos ya no necesitan prefijos de proveedor para los degradados, y conviene añadir un color de reserva sólido por si el degradado no llega a renderizarse. ```css /* Edited generator output: solid fallback, own colours, OKLCH blend */ .hero { background-color: #1e2a5a; background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%); } ``` El color de fondo se ve si el degradado no puede renderizarse. Los navegadores que no admiten la sintaxis `in oklch` ignoran toda la declaración, así que la reserva importa. Si el degradado va a usarse en un correo, como imagen social o en impresión, exporta una imagen en vez de CSS. Para las imágenes, genera al tamaño final, añade grano antes de exportar y guarda en PNG para evitar bandas de compresión. ## Pruébalo antes de publicar ### Probado en el generador - Una vista previa cuadrada y pequeña - Sin texto encima - Una pantalla, a brillo máximo - Juzgado por sí solo ### Probado en uso real - El formato real, a tamaño completo y a tamaño de móvil - Titulares y texto reales, con el contraste comprobado - Entornos claros y oscuros, varias pantallas - Junto a tus otros diseños y los de tus competidores La mayoría de los degradados fallan por el contraste, no por el color. Pon tu titular real encima y compruébalo en el punto más claro detrás del texto. El [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) explica cómo. ## Cuando un generador no basta Un generador te da color. No te da una superficie con material, luz y movimiento, y no puede prometer que nadie más esté usando el mismo resultado. Si quieres un degradado que sea tuyo, necesitas algo que lo compare con el de todos los demás. Así funciona la Forge de Gradiently. Describe un estilo en una frase o constrúyelo control a control: hasta ocho colores, hasta tres materiales apilados, luz, grano y movimiento. Antes de publicar un Mark nuevo se compara con todos los demás Marks, y se rechaza todo lo que se le parezca demasiado. El resultado se renderiza en vivo detrás de tus diseños y puede tener exactamente un solo dueño. Un Mark es un degradado generado llevado más lejos: una receta completa, un código público y un dueño. ## FAQ ### ¿Qué es un generador de degradados? Es una herramienta que construye un degradado a partir de colores elegidos o aleatorios y una dirección, y lo exporta como código CSS o como imagen. ### ¿Por qué los degradados generados parecen genéricos? La mayoría comparten los mismos valores por defecto: dos paradas muy saturadas, un ángulo diagonal, ninguna textura y colores de paletas populares. Cambiar cualquiera de ellos hace el resultado más distintivo. ### ¿Necesito prefijos de proveedor para los degradados CSS? No en los navegadores actuales. Basta un valor linear-gradient() normal, y un background-color sólido antes de él sirve de reserva. ### ¿Debo usar CSS o una imagen de un generador de degradados? Usa CSS para las webs, donde es ligero y nítido a cualquier tamaño. Usa una imagen exportada para correo, posts en redes sociales e impresión. ### ¿Cómo consigo un degradado que nadie más tenga? Parte de tus propios colores, añade un material o grano y úsalo con coherencia. En Gradiently, cada Mark nuevo se compara con todos los demás antes de publicarse y cada uno tiene un solo dueño a la vez.