Generador de degradados CSS
Crea hermosos degradados CSS de forma visual: ajusta los colores, los puntos de parada, la dirección y copia el código CSS listo para usar.
Paradas de color
Salida CSS
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);¿Por qué usar el generador de gradientes de PixConvert?
Creador de degradados visuales con salida CSS instantánea: sin necesidad de adivinar valores hexadecimales.
Lineal y radial
Crea degradados lineales con cualquier ángulo, o degradados radiales con forma y posición configurables.
Múltiples paradas de color
Añade hasta 10 puntos de color con posiciones ajustables. Admite cualquier color CSS, incluidos rgba y hsla.
Control de ángulo
Arrastra el selector de ángulo o introduce un valor exacto en grados. Las direcciones comunes (hacia la derecha, hacia abajo a la derecha) son predefinidas.
Vista previa en vivo
La vista previa del degradado de ancho completo se actualiza en tiempo real a medida que ajusta cualquier valor.
CSS listo para pegar
El resultado es una cadena de propiedades CSS de fondo limpia, lista para pegar en cualquier hoja de estilos.
Aleatorizar
Pulsa Aleatorizar para obtener inspiración instantánea: genera una hermosa combinación de degradados aleatorios.
Casos de uso de degradados CSS
Los degradados están presentes en todas partes en el diseño de interfaces de usuario modernas.
Antecedentes de héroes
Crea degradados de fondo llamativos para las secciones principales de las páginas de destino.
- Fondos de pantalla de héroes a página completa
- Gradientes divisores de sección
- Superponer degradados en imágenes
Estilo de botones y tarjetas
Añade profundidad a botones, tarjetas e insignias con sutiles rellenos degradados.
- Gradientes del botón de acción principal
- Adornos del encabezado de la tarjeta
- La barra de progreso se llena
Diseño de marca
Crea degradados que reflejen la identidad de tu marca y que combinen con tu paleta de colores.
- Degradados de fondo para logotipos
- Fondos de iconos de aplicaciones
- activos de redes sociales
Cómo crear un degradado CSS
Elige el tipo lineal, radial o cónico. Selecciona los colores y ajusta la posición de los topes. Configura el ángulo o la dirección.
La vista previa en vivo se actualiza al instante. Haz clic en Copiar CSS para copia el valor CSS de fondo listo para usar.
Cambia entre tipos lineales y radiales y ajusta el ángulo o la forma; pega el fondo resultante en tu hoja de estilos.
Explora más herramientas
Descubre otras herramientas gratuitas que funcionan de maravilla junto con esta.
Comprobador de contraste
Compruebe las relaciones de contraste de color para cumplir con las WCAG.
Generador de sombras de cajas
Diseña sombras de caja CSS con vista previa en vivo
Convertidor de color
Convierta instantáneamente los códigos de color HEX, RGB y HSL.
Extractor de paleta de colores
Extrae los colores dominantes de cualquier imagen.
Formateador JSON
Formatee, valide y minimice JSON al instante.
Probador de expresiones regulares
Prueba y depura expresiones regulares en tiempo real.
Preguntas frecuentes
Explicación de los degradados CSS.
¿Qué es un degradado CSS?
Un degradado CSS es una transición suave entre dos o más colores definidos en CSS puro, sin imágenes. Tipos: degradado lineal (direccional), degradado radial (circular/elíptico), degradado cónico (que gira alrededor de un punto central).
¿Necesito el prefijo -webkit-?
No, para navegadores modernos (Chrome 26+, Firefox 16+, Safari 7+). El prefijo -webkit- solo es necesario para navegadores muy antiguos. Actívalo en las opciones si necesitas compatibilidad con IE10 o versiones anteriores de Safari.
¿Cómo puedo crear un degradado transparente?
Utilice colores rgba; por ejemplo, rgba(0, 0, 0, 0) para transparencia. Para lograr un desvanecimiento a transparencia, establezca el punto final en rgba(255,255,255,0) para blanco a transparente o rgba(0,0,0,0) para negro a transparente.
¿Puedo usar variables CSS en los degradados?
Sí, pero esta herramienta visual genera valores hexadecimales/RGBA. Para usar propiedades personalizadas de CSS, copia el resultado y reemplace manualmente los valores de color con sus variables (por ejemplo, var(--color-primary)).
¿Qué navegadores admiten el gradiente cónico?
El degradado cónico es compatible con Chrome 69+, Edge 79+, Safari 12.1+ y Firefox 83+. No es compatible con Internet Explorer. Para una mejora progresiva alternativa, utilice @supports (fondo: conic-gradient(red, blue)).