Ir para o conteúdo principal
Imágenes

Generador de Gradiente CSS

Crea gradientes lineales, radiales y cónicos visualmente y expórtalos en CSS o Tailwind al instante.

0 de 3 usos hoy · 3 restantes. Pasa a Pro y elimina el límite.

Mejorar

Generador de Degradados CSS

Degradado CSSLineales, radiales y cónicosProcesamiento en dispositivo

Ajusta la dirección, distribuye los pasos y lanza un degradado listo para producto, landing o sistema de diseño.

Tipo
linear
Pasos
3/8
Exportar
CSS + Tailwind
Malla
Malla activa
01

Vista previa y código

Colores base
Color 01
#8C6A2D
Base inicial del degradado.
Color 02
#D3B06F
Base final del degradado.
CSS
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Tailwind
bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]
02

Pasos y composición

Pasos de color
#8C6A2D
0% · 100%
Posición
Opacidad
#D3B06F
52% · 96%
Posición
Opacidad
#2B1D08
100% · 100%
Posición
Opacidad
03

Geometría

Tipo y dirección
Tipo
Ángulo
135°
Centro y opciones
Centro X
50%
Centro Y
50%
Repetitivo
Cadencia útil para divisores, tramas y líneas de producto.
04

Salidas avanzadas

Superposición de malla
Superposición para hero visual y superficies con profundidad.
2 capas
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Paquete de tokens
CSV con Hero, Surface y Accent listo para implementación.
:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }
Sobre

¿Qué es el Generador de Degradados CSS?

Por Quorify EditorialAtualizado em

La herramienta Generador de Degradados CSS de Quorify crea degradados lineales, radiales y cónicos visualmente y los exporta como CSS o Tailwind al instante. El procesamiento ocurre localmente en tu navegador mediante Canvas API y formatos estandarizados — útil cuando trabajas con imágenes sensibles (pasaporte, contrato, captura interna) y prefieres no subirlas a un servidor externo. Soporta formatos modernos (JPEG, PNG, WebP, AVIF) siguiendo estándares ISO/IEC. Parte del kit de imagen de Quorify — combínalo con otras herramientas de compresión, conversión y edición visual. Para detalles sobre el manejo de datos, consulta nuestra Política de Privacidad.

Casos

Cuándo usarlo

  1. Preparar una imagen antes de subirla a un sitio web, e-commerce o red social.

  2. Acelerar el trabajo de diseñador freelance con tareas repetitivas (redimensión por lotes, conversión de formato).

  3. Editar capturas de pantalla para documentación técnica o tutoriales sin abrir un editor pesado.

  4. Preparar material de marketing — banner, post, miniatura — en formato optimizado.

  5. Resolver una tarea rápida sin necesidad de instalar Photoshop o similares.

Método

Cómo funciona

El Generador de Degradados CSS usa Canvas API y los códecs de imagen nativos del navegador, que implementan estándares ISO/IEC para JPEG, PNG, WebP y AVIF. El procesamiento es local — la imagen no se envía a un servidor externo. Para detalles completos sobre el manejo de datos, consulta nuestra Política de Privacidad.

FAQ

Preguntas frecuentes

¿Se envía la imagen a un servidor?
No. El Generador de Degradados CSS procesa la imagen localmente en el navegador mediante Canvas API. Para detalles completos sobre el manejo de datos, consulta nuestra Política de Privacidad.
¿Qué formatos son compatibles?
Los principales formatos web (JPEG, PNG, WebP, AVIF). El soporte para formatos heredados (BMP, TIFF) puede variar según el navegador.
¿Hay límite de tamaño?
El procesamiento depende de la memoria del navegador. Imágenes muy grandes (más de 50 MB) pueden ralentizar la página. Recomendamos comprimir primero si es necesario.
¿Se preserva la calidad?
Las conversiones sin pérdida preservan la calidad completa. Las conversiones comprimidas (JPEG, WebP) siguen el nivel elegido — siempre hay un equilibrio entre tamaño y calidad.
¿Funciona en móviles?
Sí, en navegadores modernos. Imágenes muy grandes pueden verse limitadas por la memoria del dispositivo móvil.
¿Puedo procesar múltiples imágenes?
Algunas herramientas soportan procesamiento por lotes. Consulta la interfaz de la herramienta específica para confirmar.
Fontes

Fuentes oficiales

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Estándares internacionalesISO/IEC serie 14496/15444ISO/IEC JTC1 SC29

    Image and Video Format Specifications

    Estándares internacionales para codificación e intercambio de imágenes (JPEG, PNG, WebP, AVIF) y video — referencia usada por navegadores y software de edición.

    Consultar fonte oficial
  2. Documentación oficialVigenteGoogle Web Dev

    Web Image Best Practices

    Recomendaciones de Google sobre optimización de imagen para web — formatos modernos, lazy loading, dimensionamiento e impacto en Core Web Vitals.

    Consultar fonte oficial
  3. Estándar de la industriaExif 2.32CIPA · Camera & Imaging Products Association

    Exif Specification

    Estándar de metadatos Exif (Exchangeable Image File Format) usado por cámaras digitales y smartphones para almacenar información de captura.

    Consultar fonte oficial

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

PatrocinadoQuorify · plan gratuito
Quorify Pro

Usa Quorify sin límites

100 usos/día en las 125 herramientas · sin anuncios · historial ilimitado

Desde$4.08/mo
Ver planes
Compartilhe
PatrocinadoQuorify · plan gratuito
Quorify Pro

Usa Quorify sin límites

100 usos/día en las 125 herramientas · sin anuncios · historial ilimitado

Desde$4.08/mo
Ver planes

Relacionadas

Herramientas relacionadas

toolLayout.related_description

Max

Quitar Fondo IA

Inteligencia Artificial que recorta y elimina perfectamente el fondo de cualquier imagen.

Pro

Marca de Agua (Lote)

Acelera los envíos de inmuebles aplicando marcas de agua y Logos a 50 fotos a la vez. Descarga en ZIP.

Pro

Convertidor de Imágenes

Redimensiona y convierte imágenes sin perder calidad.

Max

Compresor de Imágenes

Reduce drásticamente el peso de tus imágenes sin perder calidad visual.

Pro

Redimensionador de Imágenes

Ajusta la exactitud de los píxeles de ancho o alto.

Pro

Redimensionador de Imágenes (Lotes)

Convierte y redimensiona docenas de imágenes simultáneamente directamente en tu navegador con 100% de privacidad.