Construye degradados CSS lineales y radiales visualmente
Un generador de degradados te deja construir degradados CSS de forma visual — eligiendo colores, posicionando paradas y escogiendo la dirección — y luego te da el CSS exacto para pegar en tu hoja de estilos. Un degradado es una mezcla suave entre dos o más colores, y CSS lo produce sin ninguna imagen, así que se mantiene nítido a cualquier tamaño y no añade peso de descarga. Los dos tipos principales son el lineal, que mezcla a lo largo de una línea recta en el ángulo que elijas, y el radial, que mezcla hacia fuera desde un punto central en círculo o elipse.
Escribir el CSS de un degradado a mano es engorroso porque la sintaxis mete la dirección, varias paradas de color y sus posiciones en una sola línea, y un pequeño error produce un borde duro o el ángulo equivocado. Construirlo visualmente y leer el código generado elimina esa fricción: ves el resultado mientras ajustas cada parada de color, y luego copias un valor que sabes que funciona. Esta herramienta genera CSS basado en estándares en tu navegador, listo para fondos, botones, superposiciones y cabeceras.
Un degradado lineal mezcla colores a lo largo de una línea recta en una dirección o ángulo que fijas, bueno para fondos y barras. Un degradado radial mezcla hacia fuera desde un punto central en círculo o elipse, útil para focos, brillos y reflejos redondeados.
Las paradas de color son los puntos a lo largo del degradado donde se sitúa un color concreto, con una posición (como 0%, 50%, 100%). Añadir más paradas crea mezclas de varios colores, y mover la posición de una parada controla dónde un color da paso al siguiente.
Sí, los degradados lineales y radiales tienen amplio soporte en los navegadores modernos, y como son CSS puro no hay imagen que cargar. Para navegadores muy antiguos, un color de fondo sólido es un respaldo seguro detrás del degradado.
Usa un color con un valor alfa (como un rgba o un hex de 8 dígitos terminado en 00) como una de las paradas. Desvanecer de un color sólido a su versión totalmente transparente es la forma estándar de crear superposiciones legibles encima de imágenes.
Generador de paleta de colores · Verificador de contraste · Mezclador de colores · Buscador de nombre de color