Generador de gradiente CSS
Crea gradientes CSS lineales y radiales con un editor visual
Gradient Settings
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview. Add multiple color stops, adjust angles, and copy the ready-to-use CSS code in one click.
FAQ
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated by the browser — no image file needed. Use background: linear-gradient() or radial-gradient().
How do I make a gradient with transparency?
Use rgba() or hsla() colors with an alpha value less than 1, or use the keyword 'transparent' as one of the color stops.
What is the difference between linear and radial gradients?
Linear gradients transition along a straight line (e.g. top to bottom). Radial gradients radiate outward from a center point in a circle or ellipse.
Sigue explorando
Otras herramientas de Desarrollo que te pueden gustar…
Formateador JSON
Formatea, valida y minifica JSON con resaltado de sintaxis y detección de errores
Codificador/Decodificador Base64
Codifica texto o archivos a Base64 y decodifica cadenas Base64 a texto legible
Codificador/Decodificador de URL
Codifica y decodifica componentes URL y parámetros de query string
Generador de UUID
Genera UUIDs aleatorios (v1, v4) o genera múltiples UUIDs en lote
Generador de Hash
Genera hashes MD5, SHA-1, SHA-256, SHA-512 desde texto o archivos
Tester de Regex
Prueba expresiones regulares con resaltado de coincidencias en tiempo real
Decodificador JWT
Decodifica e inspecciona JSON Web Tokens — ve header, payload y verifica firmas
Formateador HTML
Formatea y embellece código HTML con indentación correcta y resaltado de sintaxis