Generador de degradados CSS
Un degradado CSS crea una transición entre colores sin usar imágenes. Puede aplicarse a fondos, botones, tarjetas, bordes o superposiciones. Esta herramienta ayuda a probar combinaciones, dirección y paradas de color, y genera el código CSS listo para copiar.
Los degradados lineales avanzan en una dirección; los radiales parten de un centro; los cónicos giran alrededor de un punto. Cambiar el ángulo o la posición modifica mucho la sensación visual. Para interfaces, conviene probar el degradado con texto encima y comprobar contraste suficiente.
Consejos de diseño
No todos los degradados funcionan como fondo principal. Colores demasiado saturados pueden cansar o dificultar la lectura. Usa paradas intermedias para transiciones suaves y reserva degradados intensos para elementos de énfasis. En productos reales, revisa accesibilidad, modo oscuro y consistencia con la paleta de marca.
Este generador construye degradados CSS a partir de tres elementos: tipo, ángulo y paradas de color. En modo lineal produce linear-gradient(ángulo, color posición, ...); en modo radial usa radial-gradient(circle, ...); y en modo cónico crea conic-gradient(from ángulo, ...). La vista previa se actualiza cada vez que cambia el tipo, el ángulo o una parada, de modo que se puede comparar rápidamente cómo se comporta la misma combinación en un fondo horizontal, circular o de barrido.
Las paradas incluyen color y posición entre 0% y 100%. La página permite añadir nuevas paradas hasta un límite razonable, eliminar paradas mientras queden al menos dos y aleatorizar colores con posiciones distribuidas en el recorrido. Cuando se añade una parada, se inserta entre las dos últimas usando una posición intermedia, lo que evita que el nuevo color aparezca siempre en un extremo. Los presets cargan combinaciones ya preparadas, pero siguen siendo editables después de seleccionarlas.
El resultado se puede copiar como regla completa background: ...; o solo como valor de fondo. La primera opción es cómoda para pegar directamente en una hoja CSS; la segunda sirve cuando ya se está editando una propiedad existente, una variable o un framework que espera solo el valor. Para fondos de texto conviene revisar contraste en todos los puntos del degradado, no solo en el primer color. También es recomendable evitar demasiadas paradas si el diseño debe ser sobrio o si el degradado se usará detrás de contenido denso.
Para repetir el mismo estilo en varias páginas, copie el valor en una variable CSS. Así podrá cambiar colores, ángulo o tipo desde un solo lugar sin editar cada componente manualmente.
Comentarios