Biblioteca de Fondos Degradados
Explora más de 110 fondos degradados CSS seleccionados y organizados por estilo: atardecer, océano, bosque, fuego, morado, pastel, oscuro, neón, minimalista, cálido y frío. Haz clic en cualquier degradado para copiar al instante el valor CSS de fondo listo para usar. Gratis, sin registro.
Showing 110 of 110 gradients
Golden Hour
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunset Blaze
linear-gradient(135deg, #f83600 0%, #f9d42…
Dusk
linear-gradient(135deg, #fc4a1a 0%, #f7b73…
Amber Glow
linear-gradient(135deg, #f7971e 0%, #ffd20…
Horizon
linear-gradient(135deg, #ff6e7f 0%, #bfe9f…
Twilight
linear-gradient(135deg, #ee0979 0%, #ff6a0…
Peach Fuzz
linear-gradient(135deg, #ffb347 0%, #ffcc3…
Coral Reef
linear-gradient(135deg, #ff9a9e 0%, #fad0c…
Deep Sea
linear-gradient(135deg, #0f2027 0%, #203a4…
Aqua Splash
linear-gradient(135deg, #13547a 0%, #80d0c…
Tidal Wave
linear-gradient(135deg, #1a6dff 0%, #00d2f…
Lagoon
linear-gradient(135deg, #43c6ac 0%, #19165…
Seafoam
linear-gradient(135deg, #a8edea 0%, #fed6e…
Pacific
linear-gradient(135deg, #005c97 0%, #36379…
Maldives
linear-gradient(135deg, #00b4db 0%, #0083b…
Bali Blue
linear-gradient(135deg, #56ccf2 0%, #2f80e…
Emerald
linear-gradient(135deg, #11998e 0%, #38ef7…
Jungle
linear-gradient(135deg, #134e5e 0%, #71b28…
Moss
linear-gradient(135deg, #56ab2f 0%, #a8e06…
Rainforest
linear-gradient(135deg, #1d976c 0%, #93f9b…
Sage
linear-gradient(135deg, #b2d8b2 0%, #e8f5e…
Pine
linear-gradient(135deg, #2d6a4f 0%, #52b78…
Fern
linear-gradient(135deg, #74b49b 0%, #a7c5b…
Canopy
linear-gradient(135deg, #093028 0%, #237a5…
Inferno
linear-gradient(135deg, #f12711 0%, #f5af1…
Lava
linear-gradient(135deg, #200122 0%, #6f000…
Ember
linear-gradient(135deg, #eb5757 0%, #00000…
Phoenix
linear-gradient(135deg, #f7971e 0%, #e52d2…
Volcano
linear-gradient(135deg, #870000 0%, #190a0…
Wildfire
linear-gradient(135deg, #ff416c 0%, #ff4b2…
Torch
linear-gradient(135deg, #f46b45 0%, #eea84…
Magma
linear-gradient(135deg, #c94b4b 0%, #4b134…
Amethyst
linear-gradient(135deg, #9d50bb 0%, #6e48a…
Cosmic
linear-gradient(135deg, #20002c 0%, #cbb4d…
Lavender
linear-gradient(135deg, #e0c3fc 0%, #8ec5f…
Nebula
linear-gradient(135deg, #a18cd1 0%, #fbc2e…
Ultraviolet
linear-gradient(135deg, #4776e6 0%, #8e54e…
Plum
linear-gradient(135deg, #4b0082 0%, #9400d…
Orchid
linear-gradient(135deg, #da22ff 0%, #9733e…
Violet Haze
linear-gradient(135deg, #c471f5 0%, #fa71c…
Cotton Candy
linear-gradient(135deg, #ffecd2 0%, #fcb69…
Baby Blue
linear-gradient(135deg, #a1c4fd 0%, #c2e9f…
Blush
linear-gradient(135deg, #fbc2eb 0%, #a6c1e…
Mint Cream
linear-gradient(135deg, #d4fc79 0%, #96e6a…
Peach Sorbet
linear-gradient(135deg, #ffeaa7 0%, #fab1a…
Lilac
linear-gradient(135deg, #e0c3fc 0%, #d4a5f…
Powder Pink
linear-gradient(135deg, #ffd1dc 0%, #ffb3c…
Sky Mist
linear-gradient(135deg, #e0f7fa 0%, #b2ebf…
Midnight
linear-gradient(135deg, #0f0c29 0%, #302b6…
Obsidian
linear-gradient(135deg, #1a1a2e 0%, #16213…
Charcoal
linear-gradient(135deg, #232526 0%, #41434…
Void
linear-gradient(135deg, #000000 0%, #43434…
Abyss
linear-gradient(135deg, #000000 0%, #0f202…
Shadow
linear-gradient(135deg, #2c3e50 0%, #4ca1a…
Onyx
linear-gradient(135deg, #1a1a1a 0%, #2d2d2…
Eclipse
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Neon Pulse
linear-gradient(135deg, #00f260 0%, #0575e…
Electric
linear-gradient(135deg, #00c6ff 0%, #0072f…
Cyber
linear-gradient(135deg, #f953c6 0%, #b91d7…
Acid
linear-gradient(135deg, #b3ff00 0%, #00ff8…
Plasma
linear-gradient(135deg, #ff00cc 0%, #33339…
Laser
linear-gradient(135deg, #ff0099 0%, #49324…
Glitch
linear-gradient(135deg, #00ffff 0%, #ff00f…
Synthwave
linear-gradient(135deg, #fc00ff 0%, #00dbd…
Snow
linear-gradient(135deg, #e0e0e0 0%, #fffff…
Fog
linear-gradient(135deg, #d7d2cc 0%, #30435…
Ash
linear-gradient(135deg, #b8c6db 0%, #f5f7f…
Parchment
linear-gradient(135deg, #f5f0e8 0%, #e8dcc…
Linen
linear-gradient(135deg, #f5f5f0 0%, #e8e8e…
Slate
linear-gradient(135deg, #f8f9fa 0%, #e9ece…
Mist
linear-gradient(135deg, #f0f4f8 0%, #d9e2e…
Pearl
linear-gradient(135deg, #fdfbfb 0%, #ebede…
Honey
linear-gradient(135deg, #f6d365 0%, #fda08…
Caramel
linear-gradient(135deg, #d4a574 0%, #f4e4c…
Terracotta
linear-gradient(135deg, #c0392b 0%, #e67e2…
Autumn
linear-gradient(135deg, #d35400 0%, #f39c1…
Cinnamon
linear-gradient(135deg, #8b4513 0%, #d2691…
Saffron
linear-gradient(135deg, #f7971e 0%, #ffd20…
Maple
linear-gradient(135deg, #c94b4b 0%, #e67e2…
Butterscotch
linear-gradient(135deg, #f9d423 0%, #ff4e5…
Arctic
linear-gradient(135deg, #e8f4f8 0%, #a8d8e…
Glacier
linear-gradient(135deg, #b2d8d8 0%, #66a6f…
Steel
linear-gradient(135deg, #4b6cb7 0%, #18284…
Sapphire
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Frost
linear-gradient(135deg, #cfd9df 0%, #e2ebf…
Cerulean
linear-gradient(135deg, #2980b9 0%, #6dd5f…
Cobalt
linear-gradient(135deg, #0052d4 0%, #4364f…
Teal Dream
linear-gradient(135deg, #00b09b 0%, #96c93…
Aurora
linear-gradient(135deg, #00c9ff 0%, #92fe9…
Rainbow
linear-gradient(135deg, #ff0000 0%, #ff770…
Prism
linear-gradient(135deg, #f093fb 0%, #f5576…
Candy
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunrise
linear-gradient(135deg, #f8b500 0%, #ff6b6…
Galaxy
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Opal
linear-gradient(135deg, #a8edea 0%, #fed6e…
Holographic
linear-gradient(135deg, #f093fb 0%, #f5576…
Denim
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Rosewood
linear-gradient(135deg, #ad5389 0%, #3c105…
Citrus
linear-gradient(135deg, #f7971e 0%, #ffd20…
Watermelon
linear-gradient(135deg, #ff6b6b 0%, #feca5…
Bubblegum
linear-gradient(135deg, #ff9a9e 0%, #fecfe…
Moonrise
linear-gradient(135deg, #3a1c71 0%, #d76d7…
Tropics
linear-gradient(135deg, #1fa2ff 0%, #12d8f…
Velvet
linear-gradient(135deg, #4a0072 0%, #7b1fa…
Champagne
linear-gradient(135deg, #f7e7ce 0%, #d4a96…
Midnight Blue
linear-gradient(135deg, #2c3e50 0%, #3498d…
Tangerine
linear-gradient(135deg, #f7971e 0%, #ff6b6…
Spearmint
linear-gradient(135deg, #1d976c 0%, #93f9b…
Dusty Rose
linear-gradient(135deg, #d4a5a5 0%, #f7d6d…
Indigo Night
linear-gradient(135deg, #1a1a2e 0%, #16213…
¿Por qué usar nuestra biblioteca de fondos degradados?
- Copia instantánea con un clic: haz clic en «Copiar CSS» en cualquier tarjeta de degradado y la propiedad CSS background lista para usar se copia al portapapeles: pégala directamente en tu hoja de estilos, configuración de Tailwind o herramienta de diseño.
- Filtra y busca por estilo: explora más de 110 degradados por categoría (atardecer, océano, bosque, fuego, morado, pastel, oscuro, neón, minimalista, cálido y frío) o busca por nombre, color o palabra clave de estilo para encontrar al instante el fondo degradado perfecto.
- Salida CSS lista para producción: cada fondo degradado de la biblioteca es un valor CSS válido con la sintaxis estándar linear-gradient(). Cópialo y pégalo directamente en cualquier archivo CSS, CSS-in-JS, Tailwind o estilo en línea, sin modificar nada.
- 100 % gratis, sin registro: la biblioteca de fondos degradados es totalmente gratuita, sin cuenta, sin registro y sin límites de uso. Todos los degradados son libres para uso personal y comercial. Explora, copia y publica: sin condiciones.
Casos de uso habituales de la biblioteca de fondos degradados
- Fondos para heroes y landing pages: aplica un fondo degradado a tu sección hero, banner de CTA o diseño de página completa en segundos. La biblioteca te da CSS listo para producción que puedes pegar en tu hoja de estilos sin herramientas adicionales.
- Tarjetas de interfaz y separadores de sección: usa fondos degradados para separar visualmente secciones, destacar tarjetas de características o dar profundidad a tablas de precios. Explora la biblioteca por estilo: minimalista para separadores sutiles, neón para destacados llamativos.
- Maquetas en Figma y herramientas de diseño: copia el valor CSS de cualquier fondo degradado y pégalo directamente en Figma, Sketch o Adobe XD como relleno. La biblioteca te ahorra recrear degradados a mano en tu herramienta de diseño cada vez.
- Gráficos para redes sociales y marketing: crea fondos llamativos para publicaciones en redes sociales, miniaturas de YouTube y cabeceras de correo electrónico con degradados de la biblioteca. Las categorías atardecer, neón y océano son especialmente populares para visuales de marketing.
- Pantallas de bienvenida de apps móviles y PWA: usa fondos degradados de la biblioteca para pantallas de inicio, diapositivas de onboarding y estados de carga. Las categorías oscuro y minimalista funcionan especialmente bien para patrones de diseño móvil modernos.
- Presentaciones y diapositivas: aplica fondos degradados a diapositivas en Google Slides, PowerPoint o Keynote. La biblioteca cubre todos los estados de ánimo, desde los degradados minimalistas profesionales hasta los estilos neón y atardecer más vibrantes.
¿Qué es un fondo degradado CSS?
Un fondo degradado CSS es una transición suave entre dos o más colores renderizada enteramente por el navegador, sin necesidad de archivo de imagen. La biblioteca de fondos degradados usa la función estándar linear-gradient() de CSS, compatible con todos los navegadores modernos. Como los degradados los genera CSS, son infinitamente escalables, se cargan al instante y no añaden ni un byte a tu peso de imágenes, lo que los hace ideales para un diseño web consciente del rendimiento.
Cómo usar la biblioteca de fondos degradados
- Explora o busca: usa los botones de filtro por categoría (atardecer, océano, neón, etc.) o la barra de búsqueda para encontrar un fondo degradado que encaje con tu diseño.
- Copia el CSS: haz clic en el botón «Copiar CSS» de cualquier tarjeta de degradado. La declaración completa background: linear-gradient(…); se copia al portapapeles al instante.
- Pega y publica: pega el CSS del fondo degradado directamente en tu hoja de estilos, la prop style de Tailwind, CSS-in-JS o tu herramienta de diseño. No hace falta modificar nada: funciona tal cual.
Cómo se ve la salida CSS
- Dirección: todos los degradados usan 135deg (diagonal de arriba-izquierda a abajo-derecha) por defecto, un ángulo muy agradable. Puedes cambiar el ángulo en tu propio CSS tras copiar.
- Paradas de color: la mayoría de los degradados usan 2 o 3 paradas definidas como valores HEX. Los degradados con varias paradas (como Rainbow y Holographic) usan hasta 7 para transiciones más ricas.
- Sintaxis: la salida usa linear-gradient() estándar, compatible con todos los navegadores modernos y preprocesadores CSS (Sass, Less, PostCSS).
- Personalización: tras copiar, puedes ajustar el ángulo, añadir más paradas de color o combinarlo con background-size y background-position para efectos de degradado animados.
Categorías de la biblioteca de fondos degradados explicadas
La biblioteca de fondos degradados se organiza en 11 categorías de estilo para que encuentres el ánimo adecuado rápidamente. Los degradados atardecer y cálidos usan naranjas, amarillos y rosas: ideales para diseños energéticos y acogedores. Los degradados océano y fríos usan azules y turquesas: perfectos para interfaces profesionales y tecnológicas. Los degradados oscuros funcionan bien en interfaces de modo oscuro y heroes dramáticos. Los degradados neón son de alto contraste y vibrantes: perfectos para gaming, entretenimiento y marketing atrevido. Los degradados minimalistas son sutiles y neutros: ideales para fondos que no deben competir con el contenido.
Preguntas frecuentes
Una biblioteca de fondos degradados es una colección seleccionada de fondos degradados CSS que puedes explorar y copiar con un clic. Esta biblioteca contiene más de 110 valores linear-gradient() escogidos a mano y organizados por estilo (atardecer, océano, bosque, fuego, morado, pastel, oscuro, neón, minimalista, cálido y frío), todos listos para pegar directamente en tu CSS.
Haz clic en el botón «Copiar CSS» de cualquier tarjeta de degradado. La declaración CSS completa del fondo se copia al portapapeles. Pégala en tu hoja de estilos, en la propuesta style de Tailwind, en CSS-in-JS o en tu herramienta de diseño. No hace falta modificar nada.
Sí. Todos los degradados de la biblioteca usan la sintaxis estándar linear-gradient() de CSS con valores de color. Puedes usar cualquier degradado de esta biblioteca libremente en proyectos personales y comerciales sin atribución.
Por supuesto. Todos los degradados usan 135deg (diagonal) por defecto. Para cambiar la dirección, sustituye 135deg por cualquier ángulo: 0deg para arriba-abajo, 90deg para izquierda-derecha o cualquier otro. El resto del CSS del degradado no cambia.
CSS linear-gradient() no se puede animar directamente. La técnica más común es usar background-size: 200% 200% y animar background-position con una regla @keyframes de CSS. El CSS de degradado de esta biblioteca sirve como punto de partida para cualquier técnica de animación.
Sí. Usa el CSS copiado como prop style en línea, o añádelo a tu tailwind.config.js en theme.extend.backgroundImage. Tailwind v3+ también admite valores arbitrarios: bg-[linear-gradient(135deg,_#f6d365,_#fda085)].
Totalmente. La biblioteca de fondos degradados es una herramienta de referencia estática: no hay entrada de datos, ni subida de archivos, ni procesamiento de datos. Todo se ejecuta localmente en tu navegador. Nunca se envía ningún dato a un servidor.
Copia cualquier degradado de la biblioteca y aplícalo a tu elemento: .mi-elemento { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }. Para un fondo de página completa, aplícalo al elemento body o html.
Sí. CSS admite varias capas de fondo separadas por comas. Usa colores rgba() con transparencia en el primer degradado para fusionarlo sobre el segundo: background: linear-gradient(135deg, rgba(246,211,101,0.8), rgba(253,160,133,0.8)), linear-gradient(45deg, #667eea, #764ba2);