Generador de degradados CSS
Cree hermosos degradados CSS con vista previa
Ajustes del degradado
Puntos de color
Punto de color 1
Punto de color 2
Degradados predefinidos
Consejos sobre degradados
Use degradados lineales para lograr transiciones de color suaves en una dirección.
Los degradados radiales funcionan bien para crear efectos de iluminación focal o de enfoque.
Los degradados cónicos son perfectos para ruedas de color y patrones angulares.
Ajuste las posiciones de los puntos de color para controlar la distribución del color en el degradado.
Use colores de tonos similares para degradados sutiles o colores contrastantes para efectos intensos.
Vista previa en tiempo real
Forma abreviada CSS
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);Propiedad CSS
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);Clase CSS
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}Ajuste los colores y las posiciones. La vista previa se actualiza mientras trabaja.
Acerca del generador de degradados CSS
Nuestro generador de degradados CSS gratis facilita la creación de transiciones de color suaves y atractivas para cualquier proyecto web. Cree degradados lineales, degradados radiales y degradados cónicos con control total de colores, posiciones, direcciones y ángulos, todo con una vista previa visual en tiempo real.
Ya sea que necesite un fondo sutil de dos colores o un degradado complejo con varias paradas, esta herramienta ofrece hasta 10 paradas de color con control preciso de la posición. Elija entre plantillas predefinidas como Atardecer, Océano, Bosque y Lluvia púrpura, o use el generador aleatorio para descubrir combinaciones de colores para degradados únicas para sus diseños.
El generador produce al instante código de degradado CSS limpio que puede copiar con un clic o descargar como imagen PNG. Se ofrecen varios formatos de salida, entre ellos la forma abreviada background, la propiedad background-image y una clase CSS lista para usar. Todo el procesamiento se ejecuta en su navegador, sin subir nada a ningún servidor.
Características principales
- Compatibilidad con degradados lineales, radiales y cónicos con personalización total
- Hasta 10 paradas de color con control individual de la posición para un diseño de degradado preciso
- 8 direcciones predefinidas para degradados lineales y entrada de ángulo personalizado
- Controles de forma (círculo/elipse) y de posición para degradados radiales
- Degradado cónico con ángulo inicial ajustable para efectos de rueda de color
- 4 degradados predefinidos integrados: Atardecer, Océano, Bosque y Lluvia púrpura
- Generador de degradados aleatorios para inspirarse y explorar
- Vista previa en tiempo real que se actualiza al instante a medida que ajusta la configuración
- Copia con un clic en varios formatos de salida CSS (forma abreviada, propiedad, clase)
- Descarga del degradado como imagen PNG de alta resolución (800x600)
Cómo usar el generador de degradados CSS
- Elija un tipo de degradado: Seleccione Lineal, Radial o Cónico en el selector de tipo para definir el estilo de su degradado.
- Defina la dirección o la posición: En los degradados lineales, elija una dirección o un ángulo personalizado. En los radiales, seleccione la forma y la posición. En los cónicos, ajuste el ángulo inicial.
- Agregue y ajuste colores: Use los selectores de color para definir los colores de su degradado y arrastre los valores de posición para controlar dónde aparece cada color.
- Previsualice en tiempo real: Observe cómo la vista previa del degradado se actualiza al instante cuando cambia colores, posiciones y ajustes.
- Copie el código CSS: Haga clic en el botón Copiar para copiar al portapapeles la sintaxis del degradado CSS en el formato que prefiera.
- Descárguelo como imagen: Haga clic en Descargar para guardar su degradado como imagen PNG y usarlo en herramientas de diseño o presentaciones.
Casos de uso
- Fondos de sitios web: Cree secciones hero, encabezados y fondos de página completa llamativos con transiciones de color suaves.
- Estilo de botones: Diseñe botones con degradado que destaquen y guíen a los usuarios hacia las llamadas a la acción.
- Acentos en tarjetas y componentes: Añada bordes con degradado, superposiciones o colores de acento a tarjetas y componentes de la interfaz.
- Efectos de texto: Use degradados CSS con background-clip para crear textos con degradado de colores.
- Indicadores de carga: Construya fondos con degradado animado para pantallas esqueleto y estados de carga.
- Gráficos para redes sociales: Descargue imágenes con degradado para publicaciones, historias y fotos de portada en redes sociales.
- Colores del sistema de diseño: Establezca tokens de degradado coherentes para el lenguaje de diseño de su marca.
- Diapositivas de presentaciones: Cree fondos con degradado para presentaciones y portafolios en la web.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, el generador de degradados CSS es totalmente gratis. No hay límites de uso, ni marcas de agua en las descargas, ni necesidad de registrarse.
¿Mis datos están seguros?
Toda la generación de degradados y la creación de imágenes ocurren directamente en su navegador. No se sube ningún dato de color, código CSS ni imagen a ningún servidor, de modo que su trabajo permanece totalmente privado.
¿Cuál es la diferencia entre los degradados lineales, radiales y cónicos?
Los degradados lineales hacen la transición de los colores a lo largo de una línea recta en una dirección determinada. Los degradados radiales parten de un punto central hacia afuera, con forma circular o elíptica. Los degradados cónicos barren los colores alrededor de un punto central, como una rueda de color.
¿Cuántos colores puedo usar en un degradado?
Puede usar entre 2 y 10 paradas de color en un solo degradado. Cada parada tiene su propio selector de color y su control deslizante de posición para controlar con precisión la transición.
¿Todos los navegadores admiten los degradados CSS?
Los degradados lineales y radiales son compatibles con todos los navegadores modernos. Los degradados cónicos también tienen un amplio soporte en las versiones actuales de Chrome, Firefox, Safari y Edge.
Consejos y buenas prácticas
- Use tonos similares para efectos sutiles: Los colores cercanos en la rueda de color crean degradados suaves y elegantes que se ven naturales.
- Limite las paradas de color: Entre dos y tres colores suelen dar los resultados más limpios. Con más paradas, las transiciones pueden verse turbias si no se posicionan con cuidado.
- Defina un color de respaldo: Incluya siempre un background-color sólido antes de la declaración del degradado, para los navegadores que no puedan mostrarlo.
- Pruebe el radial para efectos de foco: Los degradados radiales funcionan bien para atraer la atención hacia el centro de una sección o resaltar un área focal.
- Pruebe en varias pantallas: Los degradados pueden verse distintos en diferentes monitores y pantallas móviles, así que previsualícelos siempre en varios dispositivos.
- Use el generador aleatorio: Haga clic en Aleatorio para descubrir combinaciones de colores inesperadas en las que quizá no había pensado.