Generador de degradados de malla
Crea fondos CSS suaves tipo malla con degradados radiales superpuestos. Arrastra puntos de color, ajusta la expansión, genera al azar con semilla y copia CSS puro.
Ajustes de la malla
Puntos de color
Vista previa
Arrastra los controles en la vista previa o escribe valores exactos.
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Herramientas Relacionadas
Ver Todas¿Qué es Generador de degradados de malla?
Crea el popular aspecto suave de «degradado de malla» con CSS puro: un color de fondo más varios degradados radiales, cada uno empezando en un punto de color y desvaneciéndose hasta transparente. Puedes colocar hasta ocho puntos arrastrándolos en la vista previa o escribiendo su posición.
Cómo usar Generador de degradados de malla
- Elige un Color de fondo.
- Selecciona un punto de color y ajusta su Color, Expansión y Posición X / Posición Y, o arrastra el punto en la vista previa.
- Usa Añadir punto / Quitar punto para cambiar cuántos colores se mezclan (de 1 a 8).
- Haz clic en Aleatorio para obtener una malla nueva, o introduce una Semilla y pulsa Aplicar semilla para obtener una reproducible.
- Copia el código CSS.
Ejemplo
4 puntos predeterminados, fondo #ff99cc
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Cuándo usar Generador de degradados de malla
Úsalo para fondos de cabecera, landing pages, pantallas de inicio de apps y fondos de color difuminados detrás de tarjetas glassmorphism. Si necesitas transiciones de color rectas y precisas, usa el Generador de degradados CSS; para una deformación de malla real necesitas una herramienta vectorial o un shader de canvas/WebGL.
Cómo funciona Generador de degradados de malla
Cada punto se convierte en radial-gradient(at x% y%, color 0, transparent spread%) y todos se listan en background-image por encima del background-color. Como cada degradado se desvanece hasta transparente, los colores se solapan y se mezclan suavemente. Aleatorio usa un generador pseudoaleatorio con semilla (mulberry32): la misma semilla y el mismo número de puntos siempre producen los mismos colores y posiciones. Es una aproximación a los degradados de malla reales (que CSS no tiene), no una malla de parches bilineales.
Casos de Uso Comunes
- Fondos de cabecera para landing pages
- Fondos para tarjetas glassmorphism
- Placeholders coloridos para portadas de blog
- Pantallas de onboarding de apps
- Fondos reproducibles mediante semillas en sistemas de diseño
Preguntas Frecuentes
¿Es un degradado de malla real?
Ninguna propiedad CSS dibuja degradados de malla reales. Superponer degradados radiales que se desvanecen hasta transparente es la técnica CSS estándar que produce un aspecto suave muy parecido.
¿Qué hace la Expansión?
Es la distancia (en porcentaje del elemento) a la que el color de un punto se ha desvanecido por completo. Los valores mayores hacen que el color cubra más superficie.
¿Puedo volver a obtener la misma malla aleatoria?
Sí. Anota el valor de la Semilla y pulsa Aplicar semilla más tarde; la misma semilla con el mismo número de puntos recrea la misma malla.