Genere un gradiente CSS lineal o radial

Cree un gradiente CSS reutilizable sin montar manualmente la puntuación ni dudar de la posición de cada parada. Elija un gradiente lineal o radial, indique su dirección o forma y añada al menos dos paradas de color ordenadas. Cada parada admite un color CSS y una posición opcional. El resultado es un único valor determinista listo para una declaración background-image, un token de diseño, una hoja de estilos o el código de una aplicación. Los tipos, descriptores, posiciones y listas incompletas no válidos se rechazan con errores de entrada claros.

Elija la familia del gradiente y su geometría

Comience por el comportamiento visual que necesita. Un gradiente lineal avanza sobre un eje, por lo que su descriptor debe ser un ángulo CSS como 135deg o una dirección por palabras clave como to right, to bottom o to top left. Un gradiente radial se expande desde un punto.

Su descriptor puede indicar circle o ellipse, añadir opcionalmente un tamaño como closest-side o farthest-corner y, si lo desea, fijar un origen después de at; por ejemplo, circle at center o ellipse farthest-corner at 25% 40%. Separar la geometría de los colores facilita revisar y reutilizar la solicitud. El generador comprueba el descriptor según la familia elegida en lugar de unir fragmentos arbitrarios sin validarlos.

Así detecta errores como usar una forma radial en un gradiente lineal antes de que el valor llegue a una hoja de estilos. También impide que se oculten comas o caracteres capaces de romper una declaración. Elija linear cuando la transición deba seguir una dirección clara y radial cuando el diseño deba extenderse desde un punto focal.

Construya una lista ordenada de paradas de color

Añada las paradas en el orden exacto en que deban aparecer en CSS. Cada parada necesita un color y el gradiente completo exige al menos dos, porque no puede existir una transición con un solo color. Puede usar formatos CSS habituales, como nombres de color, valores hexadecimales, rgb(), hsl() o la notación funcional moderna separada por espacios.

La posición de una parada es opcional. Si la omite, el navegador distribuye las paradas no especificadas conforme a las reglas de gradientes CSS. Si la incluye, debe contener una o dos longitudes o porcentajes CSS, como 0%, 12px o 30% 45%.

Dos posiciones crean una franja de color sólida con el mismo color en ambos límites. El generador conserva el orden indicado; no ordena posiciones ni reinterpreta la paleta, porque las paradas superpuestas o descendentes pueden producir transiciones abruptas útiles. Además, comprueba el equilibrio de los paréntesis y rechaza caracteres peligrosos para una declaración.

Esta validación mantiene un resultado previsible sin limitar su criterio artístico.

Use el valor generado en CSS y en automatizaciones

La respuesta contiene un campo gradient cuyo valor comienza por linear-gradient() o radial-gradient(). Asígnelo a background-image o al atajo background cuando no sea necesario conservar otras capas de fondo. También puede guardarlo en una propiedad personalizada como --hero-gradient y reutilizar el token entre componentes.

Como la capacidad solo realiza validación determinista y ensamblaje de cadenas, una misma entrada siempre produce los mismos espacios y la misma salida. Esa estabilidad resulta útil para generar código, ejecutar pruebas de instantáneas, construir temas y comparar valores byte a byte en sistemas de contenido. Ninguna solicitud de red, elección aleatoria, inferencia de modelos ni lectura del reloj influye en el resultado.

Al integrar la salida, recuerde que esta herramienta genera el valor de imagen del gradiente, no una regla CSS completa: su aplicación decide el selector, la propiedad, los valores alternativos, el tamaño y cualquier color sólido de respaldo.