Degradado Mesh CSS
Crea hermosos fondos de degradado mesh con 4 puntos de color y desenfoque ajustable. Copia el CSS puro y úsalo en cualquier proyecto.
① Elige 4 colores para cada esquina ② Ajusta la intensidad del desenfoque ③ Copia el CSS generado
Color arriba-izquierda
#C9B89A
Color arriba-derecha
#7A5C38
Color abajo-izquierda
#1A3A5C
Color abajo-derecha
#2A5A3A
Intensidad de desenfoque (px): 160px
Cómo funciona
El degradado mesh usa cuatro capas radial-gradient, cada una anclada a una esquina. Los degradados se mezclan a través de la transparencia CSS, y la intensidad del desenfoque controla cuánto se expande cada degradado.
Intensidad de desenfoque
Valores de desenfoque más altos hacen que los degradados se extiendan más y se mezclen más suavemente. Valores más bajos mantienen cada color más concentrado en su esquina.
Salida CSS
El CSS generado usa background-color como base y apila múltiples definiciones radial-gradient en background-image. No se necesita JavaScript ni canvas.
background-color: #c9b89a;
background-image:
radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px),
radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px),
radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px),
radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);
¿Qué es un degradado mesh?
Un degradado mesh es una mezcla de colores multi-punto fluida que produce fondos líquidos, similares a auroras. A diferencia de un degradado lineal o radial estándar, un degradado mesh coloca múltiples puntos de color en la superficie. La implementación CSS usa capas radial-gradient superpuestas ancladas en cada esquina — una técnica ligera sin imágenes.
Preguntas frecuentes
Un degradado mesh es un tipo de degradado que mezcla múltiples colores colocados en diferentes puntos de una superficie. El resultado es un campo de color fluido y orgánico que recuerda a auroras o efectos de luz suave.
El degradado mesh CSS usa cuatro capas radial-gradient — una anclada en cada esquina — que se extienden hacia afuera y se desvanecen en la transparencia. Estas capas se apilan en background-image.
Un degradado lineal transiciona colores a lo largo de un solo eje. Un degradado mesh coloca puntos de color en posiciones arbitrarias, produciendo una mezcla de colores multi-direccional fluida.
El desenfoque controla el radio de expansión de cada capa radial-gradient. Un valor más alto hace que cada color se expanda más antes de desvanecerse en el transparente, creando mezclas más largas y suaves.
Los degradados mesh solo CSS están limitados a puntos de anclaje en las esquinas. Los verdaderos degradados mesh (como en Figma o Illustrator) pueden tener puntos de color en cualquier lugar.
Copia el CSS y aplícalo a cualquier elemento HTML, como una sección hero, body o tarjeta. El background-color garantiza cobertura completa como respaldo.
La función radial-gradient es soportada en todos los navegadores modernos (Chrome, Firefox, Safari, Edge) desde 2013.