Generador de degradado mesh
Coloca hasta seis manchas de color sobre un color base y fúndelas en un degradado mesh suave. Copia el resultado como CSS sencillo hecho de degradados radiales o descárgalo como PNG para diapositivas, fondos de pantalla e imágenes para redes sociales.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Elige un color base: se ve allí donde las manchas ya se han desvanecido.
- Ajusta el color, el tamaño y la posición de cada mancha, o pulsa Colores aleatorios para una paleta nueva.
- Copia el CSS en cualquier elemento, o elige un tamaño y descarga un PNG.
Cómo funciona
Cada mancha se convierte en radial-gradient(circle at X% Y%, color 0, transparent S%). El círculo tiene el color pleno en el centro y se desvanece de forma uniforme hasta ser transparente al S % de la distancia a la esquina más lejana. Todas las manchas van en background-image sobre el background-color, y donde se solapan sus colores se mezclan.
Ejemplo
Por defecto hay cuatro manchas: naranja en 15 % / 20 %, violeta en 85 % / 15 %, turquesa en 70 % / 85 % y amarilla en 20 % / 80 %, sobre una base rosa claro. La primera línea del CSS es background-color: #ffd6e0;, seguida de cuatro degradados radiales.
Consejos
- Cuida que el texto se lea: pon la zona más clara detrás del titular o añade una capa semitransparente.
- Manchas más grandes y que se solapen más dan una mezcla más suave; las pequeñas parecen puntos luminosos.
- Una textura de grano encima oculta las bandas de color en pantallas grandes; prueba el generador de textura de ruido.
Preguntas frecuentes
¿Es un degradado mesh de verdad?
CSS no tiene un tipo de degradado mesh, así que el efecto se construye como es habitual en la web, con varios degradados radiales que pasan de un color a transparente, superpuestos sobre un color base. El resultado parece un degradado mesh y no necesita ningún archivo de imagen.
¿Cómo funcionan los controles de tamaño y posición?
La posición es el centro de la mancha en porcentaje del ancho y del alto. El tamaño es hasta dónde llega el color antes de desvanecerse, en porcentaje de la distancia del centro a la esquina más lejana de la caja, la misma medida que usa CSS.
¿El PNG se verá igual que el CSS?
Sí, con las mismas proporciones. El PNG se dibuja en un canvas con los mismos centros, radios y transiciones. La vista previa adopta la forma del tamaño de PNG elegido, y en un elemento con otras proporciones las manchas del CSS se estiran con él.
¿Por qué importa el orden de las manchas?
En CSS la primera imagen de fondo se dibuja encima. Por eso la mancha 1 tapa a las demás donde se solapan; para cambiar el orden, quita manchas y vuelve a añadirlas.