Diseñe hermosos degradados y exporte como CSS o imágenes
Elija colores, agregue paradas y ajuste el ángulo o el punto central para crear el degradado exacto que necesita. La herramienta admite degradados lineales, radiales y cónicos con paradas de color ilimitadas. Copie el código CSS para su hoja de estilo o descargue el degradado como PNG de alta resolución para usarlo en proyectos de diseño.
Utilice esta herramienta gratisBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
como usar
Elija el tipo de degradado
Seleccione lineal, radial o cónico. Para lineal, establezca el ángulo; para radial, establezca el punto central y la forma.
Agregar y ajustar colores
Haga clic en la barra de degradado para agregar paradas de color. Arrastre para reposicionar, haga doble clic para cambiar el color y ajuste la opacidad para cada parada.
Copie CSS o descargue
Copie el código CSS generado para uso web o establezca una resolución y descargue el degradado como una imagen PNG.
Características
Tres tipos de gradiente
Cree degradados lineales con cualquier ángulo, degradados radiales con centro y forma ajustables o degradados cónicos que se extienden alrededor de un punto. Cambie entre tipos y la vista previa se actualiza al instante.
Paradas de color ilimitadas
Añade tantas paradas de color como necesites a lo largo de la barra de degradado. Arrastre las paradas para reposicionarlas, haga doble clic para cambiar el color o haga clic derecho para eliminar. Cada parada admite opacidad para degradados semitransparentes.
Salida de código CSS
La herramienta genera código de imagen de fondo CSS válido con prefijos de proveedor. Copie el código y péguelo directamente en su hoja de estilo. La salida se actualiza en tiempo real a medida que edita el degradado.
Exportación de imágenes PNG
Descargue el degradado como PNG en cualquier resolución, desde miniaturas de 100 px hasta pancartas de 4000 px. Utilice la imagen como fondo, superposición o elemento de diseño en herramientas que no admitan degradados CSS.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhancePresupuesto
| Tipos de gradiente | Lineal, radial, cónica |
| El color se detiene | Ilimitado |
| Rango de ángulo | 0–360° |
| Salida CSS | Prefijos estándar + proveedor |
| Exportación PNG | Hasta 4000 × 4000 píxeles |
| Tratamiento | Del lado del cliente (instantáneo) |
Related Magic Eraser Tools
Preguntas comunes
¿Puedo crear un degradado con transparencia?
+
Sí. Cada parada de color tiene un control deslizante de opacidad. Establece la opacidad por debajo del 100% para crear áreas semitransparentes en el degradado. La salida CSS utiliza valores rgba y la exportación PNG conserva el canal alfa.
¿Qué es un gradiente cónico?
+
Un degradado cónico irradia paradas de color alrededor de un punto central, como el movimiento de la manecilla de un reloj. Es útil para efectos de estilo gráfico circular, ruedas de color y fondos decorativos. La compatibilidad con el navegador es excelente en los navegadores modernos.
¿Puedo usar el CSS generado en cualquier marco?
+
Sí. El resultado es CSS estándar que funciona en HTML simple, React, Vue, Tailwind y cualquier otro marco que admita CSS en línea o basado en hojas de estilo.
¿Necesitas un degradado sobre una foto?
AI Enhance puede ajustar el tono de color y la iluminación de tus fotos, y nuestra herramienta de superposición de imágenes te permite mezclar un degradado encima de cualquier imagen para lograr una apariencia pulida.
Pruébalo gratisMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Convierta colores entre formatos con nombre HEX, RGB, HSL, HSB, CMYK y CSS. Vea una vista previa en vivo, copie cualquier valor y exporte una tarjeta de color. No es necesario registrarse.
Convierta códigos de color HEX a valores RGB y viceversa. Vista previa en vivo, copia con un clic y salida de fragmentos de CSS. No es necesario registrarse: funciona en su navegador.
Elija cualquier color de una imagen cargada y obtenga sus códigos HEX, RGB y HSL al instante. Cree paletas a partir de fotografías para diseño web, marca e ilustración.
Cargue una foto y extraiga de 5 a 10 colores dominantes con códigos HEX, RGB y HSL. Copie muestras, exporte como variables ASE o CSS. No es necesario registrarse.
Genere códigos QR para URL, texto, credenciales WiFi y vCards. Personalice los colores, agregue un logotipo central y descárguelo como PNG o SVG. No es necesario registrarse.
Calcule el ancho, alto o relación de aspecto de imágenes y videos. Ingrese dos valores cualesquiera y obtenga el tercero. Proporciones preestablecidas para redes sociales, películas e impresión. No es necesario registrarse.