# Generador de malla de degradados CSS (cónica + radial) Genera el «mesh de degradados» de moda en Dribbble/Behance desde 2024: varios degradados radiales (mancha de color → fundido a transparente del mismo tono) apilados sobre un color base (opcionalmente una capa cónica), con modos de mezcla, grano de película SVG, distribuciones con semilla (esquinas / anillo / dispersión / cuadrícula), vista previa en vivo, CSS copiable y clase arbitraria de Tailwind. Las manchas se desvanecen con hex de 8 dígitos #RRGGBB00 para evitar el anillo gris del término transparent. > Página canónica: https://elysiatools.com/es/tools/css-gradient-mesh-generator - **Categoría:** Design - **Palabras clave:** mesh degradado css, generador cónico, capas radiales, fondo aurora, tailwind degradado ## Descripción general Sintaxis núcleo (MDN): en background-image multicapa la primera capa queda encima; cada capa radial se escribe radial-gradient(circle at x% y%, #color 0%, #color00 60%) — tope transparente 35–50% = manchas duras, 50–70% = mesh clásico (60% por defecto), 80–100% = lavado suave; el color base va en background-color. La capa cónica conic-gradient(from Xdeg at 50% 50%, …) aporta variación angular tipo aurora. La lista background-blend-mode se corresponde con el orden de capas (normal apilado / multiply tinta / screen luminoso / overlay medios saturados / soft-light aurora suave / hue / difference psicodélico). El grano es un data-URI SVG feTurbulence inline a baja opacidad + mix-blend-mode: overlay. Las distribuciones las dirige mulberry32 con semilla: misma semilla, mismo mesh. La exportación Tailwind es un único valor arbitrario (espacios → guiones bajos): bg-[radial-gradient(circle_at_20%_25%,_#7c3aed_0%,_#7c3aed00_60%),…] + bg-[#base]. ## Entradas - **Paleta predefinida** (select) - **Color personalizado 1** (color) - **Color personalizado 2** (color) - **Color personalizado 3** (color) - **Color personalizado 4** (color) - **Número de manchas de color** (number) - **Distribución de manchas** (select) - **Semilla aleatoria** (number) - **Caída (tope transparente %)** (number) - **Modo de mezcla** (select) - **Añadir base cónica** (checkbox) - **Ángulo inicial cónico (grados)** (number) - **Añadir grano de película** (checkbox) ## Cuándo usarlo - Al diseñar secciones hero, fondos de tarjetas o banners visuales modernos sin cargar archivos de imagen pesados. - Cuando necesitas fondos degradados reproducibles mediante semillas numéricas y exportables directamente a Tailwind CSS o CSS estándar. - Al requerir transiciones de color multicapa complejas y fluidas que eviten el halo gris usando desvanecimientos con valores hexadecimales de ocho dígitos. ## Cómo funciona - Selecciona una paleta predefinida o define hasta cuatro colores personalizados junto con el número de manchas radiales. - Ajusta la distribución (esquinas, anillo, dispersión o cuadrícula), la semilla de generación, el porcentaje de caída y el modo de mezcla. - Activa opcionalmente la base cónica angular o la capa de grano SVG para añadir textura e iluminación ambiental. - Copia el bloque CSS generado o la clase arbitraria formateada para Tailwind CSS y aplícala a tu elemento contenedor. ## Casos de uso - Creación de fondos dinámicos y estilizados para secciones principales (hero) en páginas de aterrizaje. - Diseño de tarjetas de interfaz de usuario con texturas de fondo atmosféricas y sutiles. - Generación de gradientes con grano de película para identidades visuales digitales contemporáneas. ## Preguntas frecuentes ### ¿Por qué se utiliza #RRGGBB00 en lugar de la palabra clave transparent? Evita el anillo o halo grisáceo intermedio que algunos navegadores renderizan al interpolar hacia la palabra clave transparent (equivalente a rgba(0,0,0,0)). ### ¿Qué efecto tiene el porcentaje de caída (falloff)? Controla el radio donde el degradado se vuelve transparente: valores bajos (35–50%) generan manchas definidas y valores altos (80–100%) lavados difusos. ### ¿Cómo funciona la semilla aleatoria? Aplica el algoritmo determinista mulberry32, garantizando que el mismo número de semilla genere exactamente la misma posición de manchas. ### ¿Qué aporta la base cónica opcional? Añade un degradado angular conic-gradient debajo de las capas radiales para producir efectos de iluminación tipo aurora o transiciones cromáticas continuas. ### ¿Cómo se aplica la exportación en Tailwind CSS? Genera una clase utilitaria arbitraria de fondo bg-[...] con espacios reemplazados por guiones bajos, lista para insertar en el atributo class. ## Herramientas relacionadas - [Generador de sprite sheet SVG](https://elysiatools.com/es/tools/svg-sprite-generator): Sube hasta 30 iconos SVG y combínalos en un solo sprite sheet: modo para en línea, modo para fragmentos de archivo externo. Normaliza el viewBox (derivado de width/height), deduplica iconos, opcionalmente elimina fill/stroke para currentColor, siempre limpia y atributos on\*, y genera fragmentos de uso para HTML / React / Vue / CSS con vista previa en vivo de cada icono. - [Generador de snippets CSS glassmorphism / neumorfismo](https://elysiatools.com/es/tools/glassmorphism-css-snippet-builder): Genera el snippet CSS completo de glassmorphism o neumorfismo de punta a punta: ajusta desenfoque, saturación, opacidad del tinte, radio, borde, sombra externa y brillo superior; opcionalmente superposición de grano SVG feTurbulence y degradación @supports; incluye automáticamente el prefijo -webkit-backdrop-filter (obligatorio antes de Safari 18) y el mapeo a clases Tailwind (con la nota de diferencias v3/v4), con vista previa en vivo de la tarjeta sobre un fondo degradado. - [Generador de Favicon SVG](https://elysiatools.com/es/tools/svg-favicon-generator): Convierte un logo SVG o raster en un paquete favicon completo con ICO, variantes PNG, icono Apple Touch y web manifest - [Herramienta de Marca de Agua Diagonal](https://elysiatools.com/es/tools/image-watermark-diagonal): Añade marcas de agua diagonales a imágenes con ángulo, tamaño, opacidad y posicionamiento a lo largo de la diagonal personalizables - [Herramienta de Mosaico de Marca de Agua](https://elysiatools.com/es/tools/image-watermark-tile): Añade marcas de agua en mosaico a imágenes con tamaño, opacidad, espaciado y patrones personalizables - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Pirámide de Biomasa y Flujo de Energía (ley del 10%)](https://elysiatools.com/es/tools/biomass-pyramid): Genera una pirámide trófica según la ley de Lindeman: introduzca la energía/biomasa de los productores E₁, la eficiencia de transferencia (10% por defecto, 0.1–40%) y el número de niveles (3–6). Obtiene la energía/biomasa de cada nivel, su porcentaje respecto a los productores y la pérdida en cada transferencia (respiración, egestión, no depredación). Renderiza una pirámide SVG en color (anchos en escala √E para visibilidad; las cifras siempre son reales) y una tabla por nivel, y explica por qué las pirámides de energía siempre son erectas mientras que las de números/biomasa pueden invertirse (p. ej. ecosistemas marinos). Eficiencias reales típicas: 5–20%. - [Descompositor de orden de trazos chino](https://elysiatools.com/es/tools/chinese-stroke-order-decomposition): Descompone un carácter chino en su secuencia de trazos y estructura de radicales, y renderiza una demostración SVG del orden de trazos con coloración de componentes. ## Ejemplos - [Ejemplos SVG](https://elysiatools.com/es/samples/svg-samples): Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS ## Contenido relacionado - [Herramientas de Flujo para SVG, Favicon e Iconos](https://elysiatools.com/es/hubs/svg-favicon-icon-workflows): Genera paquetes de favicon, optimiza SVG, convierte iconos entre ICO, PNG, JPG, WebP y SVG, y prepara assets listos para la web en un solo hub. - [Herramientas de codificacion y conversion de audio](https://elysiatools.com/es/hubs/audio-convert): Compara conversion de formatos de audio, cambios de bitrate, conversion de frecuencia de muestreo, cambio de codec y exportacion en un solo hub. - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de intercambio JSON y traduccion de formatos](https://elysiatools.com/es/hubs/json-convert): Compara herramientas de conversion JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN y otros formatos estructurados en un solo hub.