Saltar al contenido principal
ImágenesProcessado no seu navegador

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
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%); }

§ Cómo usar

Cómo generar un degradado CSS visualmente

Crea degradados lineales, radiales o cónicos con vista previa en vivo y exporta CSS listo para pegar.

  1. Elige el tipo de degradado

    Lineal (el más común, transiciones direccionales), Radial (del centro hacia afuera) o Cónico (arco — útil para gráficos).

  2. Define colores y stops

    Agrega dos o más colores. Arrastra para cambiar la posición de cada stop. Colores en HEX, RGB o HSL.

  3. Ajusta el ángulo o el centro

    Lineal: 0deg (vertical), 90deg (horizontal), 45deg (diagonal). Radial: define el origen en píxeles o %.

  4. Copia el CSS

    Código listo para pegar en tu hoja de estilos, con prefijos -webkit/-moz para máxima compatibilidad.

Relacionadas

Herramientas relacionadas

Da mesma categoria.

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.

Gratis

Mood Board

Combina URLs de imágenes, paleta hex y keywords en una grilla visual exportable.

Max

Quitar Fondo IA

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

Pro

Paleta de Colores Mágica

Ingresa un color base y genera esquemás armoniosos (Análogos, Monocromáticos, Complementarios) al instante.

Gratis

Verificador de Contraste WCAG

Verifica el contraste de colores y la conformidad WCAG AA/AAA con vista previa y exportación.

Gratis

Visor EXIF

Visualiza metadatos de imágenes: GPS, cámara, fecha y más.