Generador Avanzado de Gradientes CSS
Crea gradientes CSS lineales, radiales y cónicos con paradas de color ilimitadas, ajustes preestablecidos y vista previa en vivo.
Diseña gradientes CSS complejos con control total usando este generador avanzado de gradientes gratuito. Añade tantas paradas de color como quieras, define la posición exacta de cada una, alterna entre gradientes lineales, radiales y cónicos y empieza desde un ajuste preestablecido. La vista previa en vivo se actualiza al instante y copias una regla de fondo limpia y lista para pegar, todo en tu navegador y sin instalar nada.
¿Qué es un generador avanzado de gradientes CSS?
Un generador avanzado de gradientes CSS va más allá de las mezclas de dos colores: te permite apilar cualquier cantidad de paradas de color, posicionar cada una con precisión a lo largo del gradiente y elegir la forma del gradiente: lineal, radial o cónico. Escribe por ti el valor exacto de linear-gradient(), radial-gradient() o conic-gradient(), de modo que nunca tengas que ajustar a mano las paradas de color ni los ángulos.
Cómo crear un gradiente con varias paradas
Elige un tipo de gradiente, luego añade paradas de color y arrastra sus posiciones para definir exactamente cómo se mezclan los colores. Los gradientes cónicos y lineales también te permiten establecer el ángulo. Cuando la vista previa quede como quieres, copia la regla de fondo CSS generada directamente en tu hoja de estilos.
- Elige Lineal, Radial o Cónico como tipo de gradiente.
- Haz clic en Añadir parada de color para insertar todas las paradas que necesites.
- Define el color de cada parada con la muestra o el campo HEX y escribe su porcentaje de posición.
- Ajusta el ángulo para los gradientes lineales y cónicos, o empieza desde un ajuste preestablecido.
- Haz clic en Copiar CSS para obtener la regla de fondo lista para pegar.
¿Por qué usar este generador avanzado de gradientes?
- Paradas de color ilimitadas con control preciso de la posición de cada una.
- Gradientes CSS lineales, radiales y cónicos en una sola herramienta.
- Biblioteca de ajustes preestablecidos para empezar desde gradientes populares.
- Vista previa en vivo que se actualiza al instante mientras ajustas las paradas y el ángulo.
- Un clic copia una regla de fondo limpia y lista para pegar.
- 100% gratis y privado: todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Cuántas paradas de color puedo añadir?
Tantas como necesites. Haz clic en Añadir parada de color para insertar paradas adicionales y elimina cualquier parada con su botón × (un gradiente siempre conserva al menos dos paradas).
¿Qué es un gradiente cónico?
Un gradiente cónico distribuye los colores alrededor de un punto central, como un gráfico circular o una rueda de colores, en lugar de a lo largo de una línea (lineal) o hacia afuera en anillos (radial). Es ideal para ruedas de arcoíris, gráficos circulares y efectos angulares, y usa la función CSS conic-gradient().
¿Puedo definir la posición exacta de cada color?
Sí. Cada parada de color tiene un campo de posición de 0% a 100% para que controles con precisión dónde se sitúa cada color y cuán brusca o suave es la transición entre los colores.
¿Estos gradientes funcionan en todos los navegadores?
Los gradientes lineales y radiales son compatibles en todas partes. Los gradientes cónicos son compatibles con todos los navegadores modernos, así que el CSS estándar que genera esta herramienta funciona sin prefijos de proveedor en los navegadores actuales.