Generador de degradados CSS
Colores por un lado, una declaración por el otro.
Resultado
Pega o escribe arriba para ver el resultado aquí.
Tus archivos se quedan en tu dispositivo
Esta herramienta se ejecuta por completo en tu navegador. Lo que pegas se procesa en tu dispositivo y nunca se envía a un servidor, así que puedes usarla con tokens, claves y textos sin publicar.
Cómo funciona
- Un color por línea. Vale cualquier color CSS: hex, rgb(), hsl() o un nombre de color.
- Añade una posición detrás de un color para fijarlo: «#000 80%».
- Elige lineal, radial o cónico, y el ángulo o el centro.
- Copia la declaración.
Preguntas frecuentes
- ¿Por qué va primero un color plano?
- Es la reserva. Todo lo que no sepa leer el degradado —un navegador antiguo, un cliente de correo, un motor de PDF— toma la primera declaración y pasa de la segunda. Sin ella, esos lectores se quedan sin fondo alguno.
- ¿Hacia dónde apunta 180deg?
- Hacia abajo. En CSS, 0deg apunta hacia arriba y el ángulo gira en el sentido de las agujas del reloj, al revés que la vieja sintaxis -webkit- y que la mayoría de las herramientas de diseño. Es lo que más se pone al revés aquí.
- ¿Por qué texto y no un lienzo que arrastrar?
- Porque un lienzo no se pega en una revisión de código. Lo que sale aquí es una declaración: se puede comparar, versionar y leer por la siguiente persona que abra el archivo.
- ¿Se envía algo a un servidor?
- No. Funciona en tu navegador, así que lo que pegues se queda en tu ordenador.
Herramientas relacionadas
◒ Generador de box-shadow CSS La declaración, no un lienzo que arrastrar. ◒ Conversor de color HEX, RGB, HSL y CMYK, más la relación de contraste que decide la legibilidad. ◐ Comprobador de contraste Si alguien puede leerlo de verdad. ◒ Formateador CSS Una declaración por línea, o todo el archivo en una.