Generador de CSS

Galería de Gradientes CSS

Crea un conjunto pulido de gradientes a partir de tus colores, compara múltiples direcciones y estilos de renderizado, y copia el CSS exacto que necesitas para un fondo, bloque hero o interfaz de usuario.

  • Genera variaciones lineales, radiales y cónicas desde un solo conjunto de entrada.
  • Copia declaraciones CSS completas o la función de gradiente pura con un clic.
  • Valida posiciones de parada y colores antes de exportar nada.
  • Aleatoriza ajustes preestablecidos para inicios rápidos en lugar de controles vacíos.

Crea tu conjunto de gradientes

Elige un tipo base, define hasta cuatro paradas de color y luego genera una galería de variaciones útiles. Las paradas extra vacías se ignoran de forma segura.

Usado para gradientes lineales y cónicos. Valores ajustados de 0 a 360 grados.
Paradas de color
Usa colores hexadecimales. Las posiciones se redondean a porcentajes enteros y deben estar en orden ascendente.

La copia usa el formato background: ...;. Las tarjetas de vista previa también muestran la función de gradiente pura.

El resultado destacado refleja tu tipo principal seleccionado. Las tarjetas de la galería a continuación muestran alternativas en otras direcciones usando los mismos datos.

6 Variaciones de galería
Entero % Redondeo de parada

El renderizado puede variar ligeramente entre navegadores y los gradientes cónicos grandes pueden mostrar bandas en algunas pantallas. Las posiciones de parada exportadas se ajustan de 0 a 100 para un CSS predecible.

Compara las variaciones generadas lado a lado, luego copia la versión que encaje en tu diseño en lugar de reconstruir las paradas a mano.

Cómo funciona

El generador toma tus paradas de color activas, sanea cada valor y construye una cadena de gradiente base. A partir de ahí, crea una galería de ángulos relacionados, colocaciones radiales y rotaciones cónicas para que puedas revisar alternativas realistas sin cambiar la paleta subyacente.

Solo se usan colores hexadecimales válidos. Se saltan los colores opcionales en blanco. Las posiciones se ordenan solo cuando los datos ya son válidos; si una parada va hacia atrás, la página señala el error en lugar de cambiar tu entrada silenciosamente.

Las acciones de copia intentan usar primero la Clipboard API y recurren a un área de texto temporal cuando es necesario. Si la copia no está disponible, el CSS permanece visible en un bloque de código seleccionable para que siempre haya una ruta de exportación confiable.