Generador de mesh gradient: arrastra puntos de color y copia el CSS | We.Inc
Arrastra puntos de color por un lienzo para crear un mesh gradient suave y luego copia CSS puro hecho con radial gradients apilados o descarga un PNG. Gratis, en tu navegador.
Generador de mesh gradient
Un mesh gradient mezcla varios puntos de color sobre una superficie en lugar de avanzar a lo largo de una línea. En la web puedes imitarlo con CSS puro apilando un radial-gradient por punto sobre un color base. Arrastra los puntos de abajo, define el color y el alcance de cada uno y luego copia el CSS o guarda un PNG.
Qué herramienta de degradados encaja con cada trabajo
Quieres
Usa
Resultado
Un fondo estático de manchas suaves sin scripts
Este generador de mesh
CSS o PNG
Un fondo que se mueve despacio
Generador de degradados con shaders
Componente WebGL
Una mezcla lineal, radial o cónica de dos a cinco paradas
Generador de degradados CSS
Una sola línea de degradado
Cada punto se convierte aquí en su propio degradado radial, pintado encima de un color base. Como el resultado es CSS normal, no supone ninguna descarga, no necesita JavaScript en tu sitio y se adapta a cualquier tamaño de caja sin desenfocarse.
Elige un preajuste o deja el predeterminado y arrastra cualquier control numerado del lienzo para mover ese color.
Si usas el teclado, puedes enfocar un control y desplazarlo con las flechas, o escribir valores exactos de X e Y en la lista de puntos.
Cambia el color de un punto y su alcance. El alcance es donde el color se vuelve totalmente transparente, medido como fracción de la distancia desde el punto hasta la esquina más lejana de la caja.
Añade hasta ocho puntos o elimina los que sobren, y después copia el CSS o descarga el lienzo como PNG al tamaño que elijas.
De tres a cinco puntos suelen verse más ricos que ocho. Más capas casi siempre convierten el centro en barro.
Pon el color base cerca del punto más claro para un aspecto pastel, o muy oscuro para un estilo nocturno luminoso.
Coloca el texto de los titulares sobre la zona más tranquila y comprueba su contraste en los puntos más claros y más oscuros que cubre.
El PNG es práctico para emails e imágenes de redes sociales, donde un fondo CSS no viaja con el diseño.
Preguntas frecuentes
¿Es un mesh gradient de verdad?
Las apps de diseño como los editores vectoriales crean mallas reales a partir de una cuadrícula de parches. CSS no tiene una función de malla, así que esta herramienta superpone degradados radiales, lo que da la misma sensación suave y multicolor para fondos y secciones hero.
¿En qué se diferencia del generador de degradados con shaders?
La herramienta de shaders dibuja un degradado animado con WebGL y exporta un componente que ejecuta un script. Esta crea una imagen estática solo con CSS, así que se muestra al instante, se imprime y funciona donde los scripts están bloqueados.
¿Por qué cada color se desvanece hacia una versión transparente de sí mismo?
Desvanecer hacia la palabra clave transparent puede teñir el borde de gris en algunos modos de interpolación. Terminar cada capa con los mismos valores de rojo, verde y azul y alfa cero mantiene limpio el borde.
¿Puedo usar el CSS en Tailwind?
Sí. Pon las declaraciones en una clase de tu hoja de estilos, o pega el valor de background-image en una propiedad arbitraria como [background-image:...] si prefieres mantenerlo en línea.
¿El PNG coincide exactamente con el CSS?
Casi. La descarga se dibuja en un lienzo con los mismos puntos, colores y alcance, pero los navegadores pueden suavizar los degradados del lienzo de forma ligeramente distinta a los de CSS.
Cómo los degradados radiales apilados forman una malla
background-image acepta una lista separada por comas, y la primera capa de la lista se pinta encima. Aquí cada capa es un círculo centrado en un punto, sólido en el centro y transparente en su alcance, así que los colores vecinos se superponen y se mezclan.
No se indica ninguna palabra clave de tamaño, así que cada círculo usa el tamaño predeterminado farthest-corner, y los porcentajes de las paradas se escalan con la caja. Por eso un punto cerca del centro se extiende menos que uno en una esquina con el mismo alcance, y un banner ancho agranda todos los círculos, así que previsualiza con la relación de aspecto que vayas a usar de verdad.
Cómo conseguir que quede bien
Elige colores cercanos entre sí en la rueda de color para un resultado tranquilo, y añade un único punto contrastado para dar energía. Saca los puntos parcialmente por el borde para sugerir que el color continúa más allá del marco.
Si ves bandas visibles en degradados grandes y oscuros, añade una imagen de textura de ruido tenue como capa extra, o aclara un poco el color base.
El CSS detrás de una malla
Este es el preajuste Puerto escrito a mano. Edita cualquier valor y el resultado se actualiza en el marco.
Cuatro puntos sobre una base clara
Cada radial-gradient es un punto de color. Las capas que aparecen primero quedan encima de las siguientes.
Qué controla cada ajuste
Ajustes y el CSS que generan
Ajuste
Parte del CSS
Efecto
Posición del punto
circle at X% Y%
Dónde el color es más intenso
Color del punto
primera parada de color
El tono pintado en ese lugar
Alcance
segunda parada, p. ej. 55%
Fracción de la distancia a la esquina más lejana donde el color es totalmente transparente
Color base
Lo que se ve donde no llega ningún punto
Orden de los puntos
orden de las capas
Los puntos anteriores cubren a los posteriores donde se superponen
Puerto
Albaricoque
Turno de noche
Pradera
Editor de mesh gradient
Arrastra los puntos de color numerados en el lienzo, define el color y el alcance de cada uno y luego copia el CSS o descarga un PNG. Preajustes: Puerto, Albaricoque, Turno de noche, Pradera.
Preajustes
Punto {n} en {x}% {y}%. Usa las flechas para moverlo.