Mesh Gradient animé

Un arrière-plan dégradé en maillage qui combine les éléments « radial-gradient » et « filter: Blur() de CSS pour superposer plusieurs dégradés et les animer en douceur.

Aperçu

Mesh Gradient

Smooth flowing colors

Cas d’utilisation et fonctionnalités

Ce dégradé de maillage animé est parfait pour les arrière-plans de sites Web modernes et dynamiques.

Section Héros : Peut être utilisée comme première vue de votre page de destination pour attirer l’attention de vos visiteurs.
Écran d’authentification : Rend les écrans de connexion et d’inscription, qui ont tendance à être simples, plus attrayants.
Arrière-plan de la carte : Convient aux arrière-plans des interfaces utilisateur des cartes de crédit et aux éléments qui souhaitent mettre l’accent sur une sensation premium.
Caractéristiques principales :
- Il est léger car il est implémenté uniquement avec CSS et ne dépend pas de Canvas ou WebGL.
- La combinaison de « mix-blend-mode : screen » et « filter : blur() » permet aux couleurs de se mélanger magnifiquement et naturellement.
- will-change: transform est spécifié pour prendre en compte les performances de rendu.

Points of design and UX

Animation organique : La période d’animation (durée) de chaque élément circulaire est décalée pour créer des mouvements irréguliers et naturels.
Harmonie des couleurs : Des couleurs fortement contrastées telles que le rose fluo, le bleu vif, le cyan et le jaune sont disposées pour créer de la profondeur lorsqu’elles sont mélangées.
Compatibilité avec le glassmorphisme : En appliquant un « filtre de fond » (flou d’arrière-plan) au contenu du premier plan, vous pouvez créer une interface utilisateur moderne où la gradation d’arrière-plan est magnifiquement transparente.

Comment personnaliser

Changement de couleur : Vous pouvez créer un dégradé original qui correspond à la couleur de votre marque en changeant simplement la couleur de radial-gradient dans la classe .mesh-blob-*.
Ajustements de l’animation : La réduction de la quantité de mouvement de translate dans @keyframes float* entraîne un mouvement plus modeste et plus doux.
Force du flou : En ajustant la valeur de filter: blur(60px) dans .mesh-bg, il est possible de rendre les limites de couleur plus claires ou de les mélanger plus doucement.

##Code d’implémentation

<div class="mesh-container">

<div class="mesh-bg">

  <div class="mesh-blob mesh-blob-1"></div>

  <div class="mesh-blob mesh-blob-2"></div>

  <div class="mesh-blob mesh-blob-3"></div>

  <div class="mesh-blob mesh-blob-4"></div>

</div>

<div class="mesh-content">

  <h3 class="mesh-title">Mesh Gradient</h3>

  <p class="mesh-subtitle">Smooth flowing colors</p>

</div>

</div>



<style>
.mesh-container {

position: relative;

width: 100%;

height: 400px;

overflow: hidden;

border-radius: 16px;

background-color: #030014;

display: flex;

align-items: center;

justify-content: center;

font-family: 'Inter', system-ui, sans-serif;

}



.mesh-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

filter: blur(60px);

z-index: 0;

opacity: 0.9;

}



.mesh-blob {

position: absolute;

border-radius: 50%;

mix-blend-mode: screen;

will-change: transform;

}



.mesh-blob-1 {

width: 400px;

height: 400px;

background: radial-gradient(circle, rgba(255, 0, 204, 0.8) 0%, rgba(255, 0, 204, 0) 70%);

top: -100px;

left: -100px;

animation: float1 15s infinite ease-in-out;

}



.mesh-blob-2 {

width: 500px;

height: 500px;

background: radial-gradient(circle, rgba(51, 51, 255, 0.8) 0%, rgba(51, 51, 255, 0) 70%);

bottom: -150px;

right: -100px;

animation: float2 18s infinite ease-in-out;

}



.mesh-blob-3 {

width: 450px;

height: 450px;

background: radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, rgba(0, 255, 255, 0) 70%);

top: 50px;

right: -50px;

animation: float3 20s infinite ease-in-out;

}



.mesh-blob-4 {

width: 350px;

height: 350px;

background: radial-gradient(circle, rgba(255, 204, 0, 0.6) 0%, rgba(255, 204, 0, 0) 70%);

bottom: 0px;

left: 50px;

animation: float4 22s infinite ease-in-out;

}



@keyframes float1 {

0% { transform: translate(0px, 0px) scale(1); }

33% { transform: translate(100px, 150px) scale(1.2); }

66% { transform: translate(-50px, 50px) scale(0.9); }

100% { transform: translate(0px, 0px) scale(1); }

}



@keyframes float2 {

0% { transform: translate(0px, 0px) scale(1); }

33% { transform: translate(-150px, -100px) scale(1.3); }

66% { transform: translate(100px, -50px) scale(0.8); }

100% { transform: translate(0px, 0px) scale(1); }

}



@keyframes float3 {

0% { transform: translate(0px, 0px) scale(1); }

33% { transform: translate(-100px, 100px) scale(1.1); }

66% { transform: translate(150px, -150px) scale(1.2); }

100% { transform: translate(0px, 0px) scale(1); }

}



@keyframes float4 {

0% { transform: translate(0px, 0px) scale(1); }

33% { transform: translate(150px, -150px) scale(0.9); }

66% { transform: translate(-150px, 150px) scale(1.3); }

100% { transform: translate(0px, 0px) scale(1); }

}



.mesh-content {

position: relative;

z-index: 1;

text-align: center;

color: white;

background: rgba(255, 255, 255, 0.05);

padding: 40px 60px;

border-radius: 24px;

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.1);

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

}



.mesh-title {

margin: 0;

font-size: 2.5rem;

font-weight: 700;

letter-spacing: -1px;

background: linear-gradient(135deg, #fff, #e0e0e0);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}



.mesh-subtitle {

margin: 10px 0 0;

font-size: 1.1rem;

font-weight: 400;

color: rgba(255, 255, 255, 0.7);

}
</style>

État de compatibilité du navigateur

-Chrome : assistance

Firefox : Assistance
Safari : pris en charge (le préfixe -webkit-backdrop-filter est requis pour flouter le contenu de premier plan)
Bord : Prise en charge