Diseñar un Degradado CSS con Vista Previa
Diseña un degradado CSS eligiendo colores, ángulo y tipo, previsualiza en vivo y copia el código.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Se arma en local
Seguro para marcas sin lanzar
Sin cuenta
Conexión segura
Cómo funciona
- 1
Elige los colores
Fija el color inicial y el final, y añade paradas intermedias si la transición necesita guía.
- 2
Define dirección o forma
Elige un ángulo para un degradado lineal, o una forma y posición para uno radial.
- 3
Copia el CSS
Lleva la declaración `background` generada directamente a tu hoja de estilos.
Por qué usar esta herramienta
Lo ves mientras lo construyes
Un degradado se juzga por su centro, no por sus extremos: la vista previa muestra justo la parte que suele fallar.
CSS listo para copiar
La salida es una declaración `background` válida y bien formateada, sin retoques antes de pegar.
Lineal y radial
Ambos tipos con control de ángulo o forma, lo que cubre casi cualquier degradado que necesita un sitio.
Varias paradas de color
Añade paradas para dirigir el camino entre colores en vez de aceptar lo que dé el punto medio.
No se sube nada
La declaración se arma en tu navegador: ningún valor de color se envía a ningún sitio.
Gratis y sin cuenta
Sin registro, sin límite y sin marca de agua.
El centro embarrado y por qué ocurre
La decepción más habitual con los degradados es que dos colores atractivos producen entre ellos una banda apagada gris parduzca. No es un fallo de diseño sino matemático: los navegadores interpolan los degradados en sRGB, mezclando los canales rojo, verde y azul por separado y en línea recta. Mezcla así un azul saturado con un amarillo saturado y el punto medio tendrá cantidades intermedias de los tres canales, que es la definición de gris. El efecto es peor entre colores lejanos en el círculo de matices —de azul a amarillo, de rojo a verde— y apenas se nota entre vecinos. Reconocerlo como aritmética y no como cuestión de gusto es lo que lo hace solucionable.
Arreglarlo con una parada intermedia
El remedio práctico es dejar de permitir que el navegador elija el camino. Añade una parada de color en el centro y ponla en el matiz por el que debería pasar la transición: un degradado de azul a amarillo encaminado por un verde o un turquesa se mantiene vivo todo el trayecto, porque le has dicho a la interpolación por dónde ir en vez de dejarla cortar por el centro neutro. Elegir ese color intermedio es más fácil en HSL, donde puedes tomar un ángulo de matiz entre los dos extremos y mantener alta la saturación; el conversor de color convierte ese valor en el HEX que pide la declaración. Una parada bien colocada arregla la mayoría de degradados que se ven lavados.
Lineal y radial, y cuándo va cada uno
Un degradado lineal recorre un eje recto en el ángulo que fijes: 180deg de arriba abajo, 90deg de izquierda a derecha y cualquier valor intermedio. Es la elección correcta para un fondo de página, una banda principal o el relleno de un botón, porque el ojo lo lee como una superficie y no como un objeto. Un degradado radial se expande desde un punto, lo que se lee como una fuente de luz o un resplandor. El radial funciona para un efecto de foco detrás de un elemento central y falla como fondo de página completa, donde tiende a parecer un viñeteado que nadie pidió. Si dudas, la respuesta es casi siempre lineal.
Degradados y texto conviven mal
Un degradado detrás de texto es uno de los fallos de accesibilidad más constantes de la web, por un motivo estructural: el requisito de contraste se aplica en cada punto que el texto atraviesa, y un degradado tiene por definición un fondo distinto en cada punto. Un titular que supera 4,5:1 contra el extremo claro del degradado puede caer por debajo de 3:1 contra el extremo oscuro, y la medición que aprueba en un extremo no dice nada del otro. Prueba el color del texto contra ambos extremos con el verificador de contraste; si alguno suspende, la solución es un panel sólido detrás del texto y no otro color de texto.
La contención es lo que hace que un degradado parezca actual
Los degradados que se leen como contemporáneos son casi siempre sutiles: dos tonos del mismo matiz separados por unos pocos pasos de luminosidad, aplicados a una superficie grande. Los que se leen como anticuados son de alto contraste, de varios matices y aplicados a elementos pequeños. Si tienes una paleta, el degradado más seguro es el que va entre dos pasos contiguos de la misma escala de color: aporta profundidad sin anunciarse. Una regla que sobrevive al contacto con interfaces reales: si un visitante describiría tu página como «la del degradado», el degradado está haciendo demasiado.
Rendimiento y dónde declararlo
Un degradado CSS lo dibuja el navegador en vez de descargarse, así que no cuesta ninguna petición de red y se mantiene nítido a cualquier tamaño: una ventaja real frente a una imagen de fondo y un motivo para preferirlo en fondos amplios y planos. Valen dos advertencias. Animar un degradado cambiando sus paradas de color fuerza un repintado en cada fotograma y sale caro; anima `opacity` o `transform` sobre una capa que contenga el degradado. Y en un elemento muy grande, un degradado con muchas paradas cuesta más de pintar que uno de dos, lo que importa en móviles modestos donde el tiempo de pintado es el cuello de botella.
Errores comunes que conviene evitar
- Juzgar un degradado por sus dos colores extremos. Los extremos casi siempre lucen bien; el fallo está en el centro, donde la interpolación en sRGB drena la saturación. Mira la vista previa, no las muestras.
- Aceptar un centro gris entre matices lejanos. Añade una parada intermedia en el matiz por el que quieres que viaje la transición: una sola parada rescata la mayoría de degradados lavados.
- Poner texto sobre un degradado y comprobar un solo extremo. El requisito de contraste se aplica en cada punto que el texto atraviesa; comprueba el extremo claro y el oscuro, y añade un panel sólido si alguno suspende.
- Usar un degradado radial como fondo de página completa. Se lee como viñeteado y no como superficie; el radial es para un resplandor detrás de un elemento central, el lineal para fondos.
- Animar las paradas de color. Eso repinta el degradado en cada fotograma: anima opacidad o transformación sobre una capa, que el navegador puede componer barato.
Comparativa
| KeroTools | Herramientas de desarrollo del navegador | Software de diseño | |
|---|---|---|---|
| Vista previa mientras editas | Sí | Sí, sobre una página real | Sí |
| Salida CSS lista para copiar | Sí | Sí | A menudo aproximada |
| Funciona antes de construir | Sí | No — necesita una página renderizada | Sí |
| Valores enviados a un servidor | Nunca | No | No |
| Cuenta o licencia | Ninguna | Ninguna | Licencia requerida |
| Coste | Gratis | Gratis | De pago |
Características
Degradados lineales
Cualquier ángulo en grados, o las direcciones por palabra clave que acepta CSS.
Degradados radiales
Circulares o elípticos, con control de dónde se sitúa el centro.
Varias paradas de color
Inserta colores intermedios y colócalos con precisión a lo largo del eje.
Vista previa en vivo
El degradado se dibuja mientras editas, así el centro embarrado se ve antes de publicar.
Salida CSS válida
Una declaración `background` completa, no un fragmento que tengas que montar.
Entrada de color HEX
Pega los códigos directamente desde un documento de marca o una paleta.
Sin instalación
Nada que descargar ni instalar: funciona en la propia página web.
Compatible con árabe y RTL
Interfaz completa en ocho idiomas, incluido el árabe de derecha a izquierda.
Seguro por defecto
Servido por HTTPS, sin rastreo de archivos ni subidas a terceros.
Quién la usa
Desarrolladores front-end
Obtener una declaración de degradado válida sin escribir a mano ángulos y posiciones de parada.
Diseñadores
Comprobar cómo se dibuja realmente una transición de dos colores antes de que llegue a un mockup.
Quien personaliza una plantilla
Producir un fondo de cabecera o de botón a partir de dos colores de marca que ya tiene.
Quien está aprendiendo
Ver qué hace cambiar un ángulo o añadir una parada, en lugar de adivinar la sintaxis.
Preguntas Frecuentes
No. Todo se ejecuta localmente en tu navegador — nada se sube, guarda ni comparte.
Sí — totalmente gratis, sin cuenta y sin límites.