ImágenesGratis · 3 usos/díaProcesado en tu navegador
Generador de Degradados CSS
Crea degradados lineales, radiales y cónicos de forma visual y expórtalos en CSS o Tailwind.
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%);
}
Relacionadas
Más de la misma categoría
Da mesma categoria.
Gratis · 2 usos/día
Marca de Agua en Lote
Aplica un logo o un texto como marca de agua en varias fotos a la vez y descárgalas todas en ZIP.
Gratis · 3 usos/día
Mood Board (Panel de Inspiración)
Combina URLs de imágenes, una paleta hex y palabras clave en una cuadrícula visual exportable.
Gratis · 1 uso/día
Quitar Fondo con IA
Recorta el fondo de la foto con un modelo de IA que funciona en tu navegador. Da mejores resultados con personas y productos en primer plano.
Gratis · 2 usos/día
Generador de Paletas de Colores
Ingresa un color base y genera esquemas armónicos (análogos, monocromáticos, complementarios).
Gratis · 3 usos/día
Verificador de Contraste WCAG
Verifica el contraste de colores y la conformidad WCAG AA/AAA, con vista previa y exportación.
Gratis · 3 usos/día
Visor EXIF
Ve los metadatos de imágenes: GPS, cámara, fecha de captura y más.