# Cómo hacer un fondo degradado que no parezca genérico [Canonical HTML page](https://gradiently.design/es/guide/gradient-background) La mayoría de los fondos degradados se parecen porque parten de los mismos pocos preajustes. Aquí tienes un método de cinco pasos para hacer uno que se vea pensado, con códigos que puedes copiar. ## The short version - Un buen fondo degradado empieza con un color base, una pequeña familia de tres a cinco colores relacionados, un material o una textura y un lugar previsto para las palabras. - La mayoría de los fondos degradados parecen genéricos porque son preajustes de dos colores en los mismos tonos populares, mezclados en una diagonal recta. - Una base oscura o clara decide el ambiente más que cualquier color suelto, así que elígela primero. - Un poco de grano oculta las bandas y hace que un degradado digital se sienta como una superficie y no como un valor por defecto de pantalla. - Renderiza el fondo para cada formato en lugar de recortar una sola imagen, para que la zona más brillante caiga siempre donde el diseño la necesita. Para hacer un **fondo degradado** que no parezca genérico, elige primero un color base, añade de tres a cinco colores relacionados en lugar de dos, da a la superficie un material como el grano o una luz suave y deja una zona tranquila donde irán las palabras. La mayoría de los fondos degradados se saltan todos esos pasos: toman un preajuste de dos colores, lo hacen correr de esquina a esquina y se detienen. Por eso tantos parecen intercambiables. ## Por qué la mayoría de los fondos degradados se parecen Las herramientas de diseño, los generadores y las plantillas ofrecen la misma lista corta de mezclas, y las tendencias empujan a todos hacia los mismos tonos en el mismo momento. De violeta a rosa, de azul a cian y de naranja a magenta son agradables, pero se usan tan ampliamente que se leen como un valor por defecto y no como una elección. El patrón más amplio se explica en [por qué todos los feeds se ven igual](https://gradiently.design/es/guide/why-every-feed-looks-the-same). ### Genérico - Dos colores saturados de un preajuste - Una diagonal recta de 45 grados - Una superficie digital perfectamente limpia - Color repartido por igual, sin sitio para las palabras - Una sola imagen estirada a todos los tamaños ### Pensado - Una base más una familia de tres a cinco colores - Una luz que viene de algún sitio - Grano, papel o brillo en la superficie - Una zona tranquila prevista para el titular - Renderizado de nuevo para cada formato ## Paso 1: elige una base La base es el color sobre el que se asienta el degradado y al que vuelve. Fija el ambiente más que cualquier acento. Una base casi negra hace que el color brille y se siente premium y nocturna; una base cálida de blanco roto se siente impresa, calmada y editorial. Elige una antes de elegir un solo acento y mantenla en todo el conjunto de diseños. - Base oscura, luz violeta: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)` - Base de papel, luz melocotón: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)` - Base verde profundo, luz turquesa: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)` Tres bases con un color iluminado cada una. La base hace la mayor parte del trabajo; el acento solo tiene que brillar. Si eliges oscuro, lee [fondos de degradado oscuro](https://gradiently.design/es/guide/dark-gradient-backgrounds) antes de exportar, porque las mezclas oscuras son donde más se notan las bandas. ## Paso 2: elige de tres a cinco colores relacionados Dos colores son el degradado más fácil de hacer y el más fácil de copiar. Una pequeña familia da profundidad: un tono de sombra, un tono principal, un realce y un acento usado con moderación. Mantén los vecinos cerca en el círculo cromático para que las mezclas sigan limpias, y deja el acento aparte. Los colores opuestos colocados uno junto a otro se volverán grises donde se encuentren, algo que cubre [degradados turbios](https://gradiently.design/es/guide/muddy-gradients). - Base de tinta: #0f0b1e - Sombra índigo: #312e81 - Violeta principal: #6d28d9 - Realce lila: #c084fc - Acento brasa: #fb923c Una base, tres violetas conectados y un acento cálido. La brasa aparece solo en un lugar pequeño, que es justo por lo que se nota. ## Paso 3: dale un material Una mezcla digital limpia parece un valor por defecto de pantalla. Un material hace que parezca una superficie. El grano se lee como película o impresión, la textura del papel se lee como artesanía, un brillo vítreo se lee como tecnología y una seda suave se lee como lujo. No necesitas mucho: una capa de ruido con poca opacidad basta para cambiar la sensación. [Textura de degradado](https://gradiently.design/es/guide/gradient-texture) compara las familias, y [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) trae el código. ## Paso 4: planifica dónde irán las palabras Un fondo existe para llevar algo: un titular, un precio, una fecha. Decide dónde van esas palabras antes de terminar el degradado, y mantén esa zona más calmada y con más contraste. Pon el color más brillante y cargado lejos del texto, normalmente en una esquina, y deja que la base se vea detrás de las palabras. Para las reglas de contraste, mira [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). Una publicación de evento donde el titular queda sobre la zona más brillante del degradado y cuesta leerlo Con el color repartido por igual, la parte más brillante puede caer justo detrás de las palabras. La misma publicación de evento con una zona más calmada y oscura del degradado detrás del titular Con una zona tranquila detrás del texto, el mismo fondo lleva el mensaje. ## Paso 5: renderízalo para cada formato Un degradado que se ve bien como publicación cuadrada puede verse mal como story vertical, porque al recortar se mueve la zona brillante. Trata el fondo como una receta que renderizas en cada tamaño, ajustando dónde cae la luz, y no como una sola imagen que recortas. - Publicación 1080×1350: 1080 × 1350 - Story 1080×1920: 1080 × 1920 - Portada web 1920×1080: 1920 × 1080 - Banner de blog 1200×600: 1200 × 600 Cuatro tamaños de fondo habituales. La luz debe caer en un lugar sensato en cada uno, no donde la deje un recorte. ## Un fondo degradado en CSS En la web, un degradado de página completa tiene un error clásico: si la página es corta, el fondo se repite en bandas. Da al elemento raíz una altura mínima, fija un color liso de reserva que también se vea al hacer overscroll y luego apila el degradado. ```css html { min-height: 100%; background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */ } body { min-height: 100vh; margin: 0; background-image: radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%), radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%), linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%); } ``` Una base oscura, una luz violeta arriba a la derecha y una sombra índigo abajo a la izquierda. Añade una capa de grano encima para terminarlo. Para una sección de portada y no una página entera, las mismas capas funcionan sobre la propia sección. [Fondos para la portada de un sitio web](https://gradiently.design/es/guide/website-hero-background) cubre tamaños y rendimiento. ## Hacerte dueño de tu fondo degradado Incluso un fondo hecho con cuidado puede copiarse y reutilizarse. En Gradiently, un fondo terminado es un Mark: una receta de colores, materiales, luz, grano y movimiento con exactamente un propietario a la vez. Se renderiza en cada tamaño en el que diseñas y deja espacio a tus palabras por sí solo. Puedes diseñar con cualquier Mark gratis y reservar uno para hacerlo tuyo. ## FAQ ### ¿Cómo hago que un fondo degradado parezca menos genérico? Empieza con un color base, usa de tres a cinco colores relacionados en lugar de dos, añade grano u otro material y planifica una zona tranquila para las palabras. ### ¿Qué colores hacen un buen fondo degradado? Los colores que están cerca en el círculo cromático se mezclan con limpieza. Añade un acento contrastado en una zona pequeña para dar interés. ### ¿Por qué mi fondo degradado CSS se repite en franjas por la página? El elemento raíz es más corto que la ventana, así que el degradado se repite en mosaico. Fija `min-height: 100%` en `html` y `min-height: 100vh` en `body`. ### ¿Debe ser oscuro o claro un fondo degradado? Vale cualquiera. Las bases oscuras hacen brillar el color y se sienten premium; las claras se sienten impresas y calmadas. Elige una y mantenla. ### ¿Cómo evito las bandas en un fondo degradado? Añade una capa de grano ligero y evita una compresión JPEG fuerte. Los degradados oscuros y sutiles son los que más bandas forman.