Generador de Degradado CSS
Este generador de degradados CSS te permite diseñar degradados lineales, radiales y cónicos de forma visual y copiar el código CSS listo para usar con un solo clic. Arrastra paradas de color, ajusta el ángulo y regula la opacidad mientras una vista previa en vivo se actualiza al instante, así nunca tienes que escribir la sintaxis del degradado a mano.
Está pensado para desarrolladores front-end y diseñadores que quieren un fondo con degradado rápido, una mezcla de varios colores o un desvanecido transparente sin memorizar las reglas linear-gradient(), radial-gradient() y conic-gradient(). Parte de un predefinido seleccionado o crea el tuyo desde cero.
Cómo usar el Generador de Degradado CSS
Elige un tipo de degradado
Elige Lineal para una mezcla en línea recta, Radial para una mezcla circular o elíptica, o Cónico para una rotación que barre alrededor de un punto central.
Agrega y edita paradas de color
Haz clic en la barra de degradado para agregar una parada, arrastra un controlador para reubicarla o sácalo de la barra para eliminarla. Edita el Color, la Posición y la Opacidad de cada parada en línea o en el editor de paradas.
Ajusta la dirección y la forma
Para el lineal, define el ángulo con la perilla, el campo de entrada o la rejilla de 8 direcciones. Para el radial, elige círculo o elipse y una posición central 3x3. Para el cónico, define el ángulo inicial y el centro.
Copia tu CSS
Cuando la vista previa se vea bien, haz clic en Copiar CSS para tomar la regla background completa y pegarla directamente en tu hoja de estilos.
Funciones
Tres tipos de degradado
Diseña degradados lineales, radiales y cónicos, cada uno con sus propios controles de dirección, forma y posición.
Paradas de color visuales
Haz clic en la barra de degradado para agregar paradas, arrástralas para reubicarlas o sácalas para eliminarlas con respuesta inmediata.
Perilla de ángulo y rejilla de dirección
Define un ángulo lineal de 0° a 360° arrastrando la perilla, escribiendo un valor o usando la rejilla rápida de 8 direcciones.
Forma y posición radial
Alterna entre círculo y elipse y coloca el origen con una rejilla de nueve posiciones 3x3 para un control preciso.
Opacidad por parada
Baja la opacidad de cualquier parada y la salida cambia a RGBA automáticamente, lista para desvanecidos transparentes.
Salida CSS resaltada
Lee un CSS de degradado limpio y con colores de sintaxis, y copia la regla background completa al portapapeles con un clic.
Deshacer y Rehacer
Avanza y retrocede por tus cambios con los botones o los atajos Ctrl+Z y Ctrl+Y.
Aleatorio e inversión
Genera un nuevo degradado aleatorio para inspirarte o invierte al instante la dirección de tus paradas actuales.
46 predefinidos seleccionados
Parte de una galería de 46 degradados elegidos a mano y organizados por familia de color, luego ajústalos a tu gusto.
Salida estándar y privada
Produce sintaxis de degradado CSS estándar que funciona en los navegadores modernos, todo generado localmente en tu navegador.
Preguntas frecuentes
¿Cómo creo un degradado en CSS?
Elige un tipo de degradado, agrega paradas de color haciendo clic en la barra de degradado y luego ajusta el ángulo, la posición y la opacidad hasta que la vista previa en vivo se vea bien. Haz clic en Copiar CSS para copiar la regla background terminada en tu hoja de estilos.
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Los degradados lineales mezclan colores a lo largo de una línea recta en el ángulo elegido. Los radiales mezclan hacia afuera desde un punto central en círculo o elipse. Los cónicos barren los colores en una rotación alrededor de un punto central, como un gráfico circular o una rueda de colores.
¿Cómo hago un degradado CSS de 3 colores (o de varios colores)?
Haz clic en cualquier punto de la barra de degradado para agregar otra parada; la nueva parada se mezcla con los colores que la rodean. Repite para agregar todas las paradas que necesites y luego arrastra cada una para colocarla. Un degradado debe conservar al menos dos paradas de color.
¿Cómo hago un degradado transparente en CSS?
Baja la Opacidad de cualquier parada en el editor de paradas. Las paradas por debajo del 100% de opacidad se generan como valores de color RGBA, y el patrón de cuadrícula en la vista previa te muestra exactamente dónde el degradado se vuelve transparente.
¿Cómo elimino una parada de color?
Arrastra el controlador de una parada fuera de la barra de degradado para eliminarla, o usa el control de eliminar en el editor de paradas. El degradado siempre conserva un mínimo de dos paradas, así que no puedes quitar las dos últimas.
¿Puedo copiar el código CSS del degradado generado?
Sí. El panel de CSS muestra una regla background con resaltado de sintaxis, y el botón Copiar CSS copia la declaración completa a tu portapapeles para que la pegues directamente en tu hoja de estilos.
¿Los degradados generados son compatibles con todos los navegadores?
La salida usa sintaxis de degradado CSS estándar compatible con las versiones actuales de Chrome, Firefox, Safari y Edge, sin necesidad de prefijos de proveedor.
¿Se almacenan en algún lugar los datos de mi degradado?
No. Cada degradado se genera por completo en tu navegador. No se envía nada a un servidor, y tus colores y diseños no se almacenan ni rastrean.
Aún no hay comentarios. ¡Sé el primero en comentar!