Generador de Degradados CSS
Diseña un degradado lineal, radial o cónico visualmente y copia el CSS con un clic.
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);
Cómo usar Generador de Degradados CSS
- Elige un tipo de degradado y ajusta el ángulo para el lineal o el cónico.
- Añade paradas de color y arrastra cada una a la posición que quieras.
- Copia el CSS generado directamente en tu hoja de estilos.
Acerca de Generador de Degradados CSS
Crea un degradado CSS de forma visual y copia el código cuando se vea bien. Elige primero el tipo: lineal, radial o cónico. Para los degradados lineales y cónicos ajustas el ángulo entre 0 y 360 grados, que controla la dirección en la que se desplazan o giran los colores; un degradado radial se dibuja como un círculo que se expande desde el centro. Una vista previa en vivo se actualiza mientras trabajas, así que estás diseñando sobre el resultado real en lugar de adivinar.
Añade tantas paradas de color como quieras, con un mínimo de dos. Cada parada tiene un selector de color y un control deslizante de posición de 0 a 100 por ciento, y las paradas se ordenan automáticamente por posición, así que puedes colocar un nuevo color en cualquier lugar y se ubicará en el sitio correcto. Así es como consigues mezclas suaves de varios colores o bandas nítidas, según lo cerca que coloques las posiciones.
El resultado es una declaración background lista para pegar en sintaxis CSS estándar de degradados; cópiala directamente en tu hoja de estilos. Escribe una única propiedad background y no añade prefijos de proveedor, que los navegadores modernos ya no necesitan para los degradados. Para colocar una sombra debajo de tu elemento, consulta el generador de sombras (box-shadow), y para ajustar un valor de color, el conversor de hex a RGB resulta muy útil.
Preguntas frecuentes
¿Cuál es la diferencia entre los degradados lineales, radiales y cónicos?
Un degradado lineal mezcla colores a lo largo de una línea recta cuya dirección estableces con un ángulo. Un degradado radial los expande hacia afuera desde el centro en forma de círculo. Un degradado cónico los distribuye alrededor de un punto central como una rueda de colores, también controlado por un ángulo.
¿Cuántos colores puedo usar?
Los que quieras, con un mínimo de dos. Cada color es una parada con su propio selector y una posición de 0 a 100 por ciento. Añadir más paradas te permite crear mezclas de varios colores o, colocando las paradas cerca entre sí, bandas de color nítidas.
¿Qué hace el control deslizante de posición?
Establece dónde se ubica cada color a lo largo del degradado, desde 0 por ciento al inicio hasta 100 por ciento al final. Las paradas se ordenan automáticamente por posición, así que mover una más allá de otra las reordena correctamente. Las posiciones cercanas crean un borde marcado; las posiciones separadas crean una mezcla suave.
¿Necesito prefijos de proveedor para el degradado?
No. La herramienta genera CSS estándar sin prefijos porque los navegadores actuales admiten degradados sin ellos. Sintaxis antiguas como -webkit- o -moz- ya no son necesarias para los tipos de degradado que se generan aquí.
¿Qué obtengo exactamente con el botón de copiar?
Una única declaración CSS de background con sintaxis de degradado estándar, lista para pegar en tu hoja de estilos. Define una propiedad background; no genera una regla o clase completa, así que colócala en el selector que estés estilizando.