Generador de gradientes CSS
Crea un gradiente lineal CSS eligiendo dos colores y el ángulo, con vista previa y código listo para copiar.
Se procesa en tu dispositivo. Nada se envía a ningún servidor.
background: linear-gradient(135deg, #0B6E63, #55BFAF);Crea un gradiente lineal CSS eligiendo dos colores y el ángulo de la transición, con vista previa en directo y el código listo para copiar.
Genera la función linear-gradient() de CSS con los colores y el ángulo indicados, compatible con todos los navegadores modernos.
Casos de uso
- Crear un fondo degradado para una cabecera.
- Diseñar botones con un efecto de gradiente.
- Probar distintas combinaciones de color antes de aplicarlas.
Cómo funciona
- 1
Elige dos colores
Selecciona el color inicial y final del gradiente.
- 2
Ajusta el ángulo
Define la dirección del gradiente en grados.
- 3
Copia el CSS
Copia la propiedad background lista para pegar en tu hoja de estilos.
Preguntas frecuentes
- ¿Solo genera gradientes lineales?
- Sí, el MVP se centra en linear-gradient(); gradientes radiales o cónicos pueden añadirse más adelante.
Herramientas relacionadas
- Generador de Border RadiusCrea border-radius CSS con preview.
- Generador de Box ShadowCrea sombras CSS con preview en vivo.
- Selector de colorElige un color y obtén HEX, RGB y HSL.
- Generador de paletasGenera paletas armónicas desde un color base.
- Generador de colores aleatoriosGenera un color HEX aleatorio.
- Verificador de contraste WCAGComprueba el contraste WCAG entre dos colores.