Generador de degradados CSS

Mira la vista previa mientras cambias los colores y el ángulo, y llévate el código CSS o un PNG.

Cargando la herramienta...

Para qué sirve

CSS para el fondo de una página: haz clic en un ajuste predefinido, ajusta el ángulo y presiona "Copiar CSS" para pegarlo en tu hoja de estilos.
Imagen de fondo para una diapositiva: elige dos colores y un ángulo, y luego "Guardar PNG" para obtener una imagen de 1920×1080.
Mezclar tres colores o más: presiona "Añadir color" y usa el control de cada color para decidir dónde cambia.

Cómo se usa

Haz clic en una combinación de colores predefinida o elige tus propios colores.
Cambia el tipo y el ángulo.
Presiona "Copiar CSS" o "Guardar PNG".

Cómo funciona

El degradado se genera como CSS estándar (lineal, radial o cónico) y se muestra al momento, y el PNG se dibuja en un lienzo en tu navegador. No interviene ningún servidor ni biblioteca, y no se guarda nada.

Si tus imágenes son privadas, el procesamiento se hace en tu navegador, así que tus archivos se quedan en tu dispositivo y no se suben a ningún servidor. Cómo comprobarlo. Si eres desarrollador, también puedes crear degradados CSS con la API REST (gradient-css; plan gratuito con límites de uso; el contenido de las solicitudes se procesa en memoria y no se guarda).

Preguntas frecuentes

¿Dónde pego el código CSS?

Pégalo en el estilo de tu página web (la propiedad background).

¿Se sube algo?

No. El degradado y el PNG se crean en tu navegador y no se envía ni se guarda nada.

¿Cuántos colores puedo usar?

Hasta 5 en un degradado, y cada color tiene una posición de 0 a 100%.

¿Qué diferencia hay entre lineal, radial y cónico?

El lineal va en una dirección, el radial se extiende desde el centro hacia fuera y el cónico gira alrededor del centro. El lineal y el cónico usan un ángulo.

¿De qué tamaño es el PNG?

Es fijo: 1920×1080 píxeles. En algunos navegadores no se puede guardar en PNG el degradado cónico, pero el código CSS sigue funcionando.

¿El degradado puede ser transparente?

No. Los colores se eligen opacos.

¿Hay una forma rápida de sacar ideas sin elegir los colores a mano?

Sí. Haz clic en una de las 12 parejas de colores predefinidas o presiona «Aleatorio» para obtener dos colores y un ángulo al azar. Después, ajusta los colores y copia el CSS.

¿Cómo quito un color que añadí?

Cuando un degradado tiene más de dos colores, cada fila de color muestra el botón «Quitar». Un degradado necesita al menos dos colores, así que el botón desaparece cuando solo quedan dos, y el máximo es cinco.

¿Hacia dónde apunta el ángulo?

En CSS, 0deg apunta hacia arriba y los ángulos mayores giran en el sentido de las agujas del reloj, así que 90deg va hacia la derecha y 180deg hacia abajo (MDN, linear-gradient). Aquí los degradados radiales no tienen control de ángulo.

¿Puedo hacer un fondo de pantalla del tamaño de mi teléfono o guardar en JPG?

No. «Guardar PNG» siempre crea un PNG de 1920×1080 y no hay opción JPG. Para otro tamaño, copia el CSS o cambia el tamaño del PNG con Redimensionar imagen usando «Tamaño personalizado»; recuerda que Rellenar recorta y Estirar deforma.