Skip to content
Herramienta gratuitaDesign

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 gratis

Características

1

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.

2

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.

3

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.

4

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.

como usar

1

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.

2

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.

3

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.

Presupuesto

Tipos de gradienteLineal, radial, cónica
El color se detieneIlimitado
Rango de ángulo0–360°
Salida CSSPrefijos estándar + proveedor
Exportación PNGHasta 4000 × 4000 píxeles
TratamientoDel 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 gratis

More free tools

Explore our other limited free edits after sign-in photo and image tools.