SnippetUI
← Back to snippets

Animasyonlu Mesh Degrade

Bu, yalnızca CSS kullanılarak uygulanan, renklerin düzgün bir şekilde değiştiği ve birbirine karıştığı dinamik bir örgü tonlaması arka plan bileşenidir.

HTMLCSS

Birden fazla degradeyi katmanlamak ve bunları düzgün bir şekilde canlandırmak için CSS’nin “radyal degrade” ve “filtre: bulanıklaştırma()” özelliklerini birleştiren bir kafes degrade arka planı.

Önizleme

Mesh Gradient

Smooth flowing colors

Kullanım durumları ve özellikleri

Bu animasyonlu örgü gradyanı, modern ve dinamik görünen web sitesi arka planları için mükemmeldir.

  • Kahraman Bölümü: Ziyaretçilerinizin dikkatini çekmek için açılış sayfanızın ilk görünümü olarak kullanılabilir.

  • Kimlik doğrulama ekranı: Genellikle basit olan giriş ve kayıt ekranlarını daha çekici hale getirir.

  • Kart arka planı: Kredi kartı kullanıcı arayüzlerinin arka planları ve premium hissi vurgulamak isteyen öğeler için uygundur.

  • Ana özellikler:

    • Hafiftir çünkü yalnızca CSS ile uygulanır ve Canvas veya WebGL’ye bağlı değildir.

    • ‘mix-blend-mode: screen’ ve ‘filter: bulanıklaştırma()’ kombinasyonu, renklerin güzel ve doğal bir şekilde karışmasını sağlar.

    • will-change: transform, oluşturma performansını dikkate alacak şekilde belirtildi.

Tasarım ve kullanıcı deneyiminin önemli noktaları

  • Organik animasyon: Her dairesel öğenin animasyon süresi (süresi), düzensiz ve doğal hareketler oluşturacak şekilde kaydırılır.

  • Renk Uyumu: Neon pembe, canlı mavi, camgöbeği ve sarı gibi güçlü kontrast oluşturan renkler, karıştırıldığında derinlik oluşturacak şekilde düzenlenmiştir.

  • Cammorfizmle uyumluluk: Ön plan içeriğine “arka plan filtresi” (arka plan bulanıklığı) uygulayarak, arka plan tonlamasının güzel bir şekilde şeffaf olduğu modern bir kullanıcı arayüzü oluşturabilirsiniz.

Nasıl kişiselleştirilir

  • Renk değişimi: .mesh-blob-* sınıfındaki radial-gradient rengini değiştirerek marka renginize uygun orijinal bir degrade oluşturabilirsiniz.

  • Animasyon ayarlamaları: @keyframes float* içindeki translate hareket miktarının azaltılması, daha mütevazı ve yumuşak bir hareketle sonuçlanır.

  • Bulanıklaştırma gücü: .mesh-bg'de filter: bulanıklık(60px)` değerini ayarlayarak renk sınırlarını daha net hale getirmek veya daha düzgün bir şekilde karıştırmak mümkündür.

Uygulama kodu

<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>

Tarayıcı uyumluluk durumu

  • Chrome: Destek

-Firefox: Destek

  • Safari: Desteklenir (ön plan içeriğini bulanıklaştırmak için -webkit-backdrop-filter öneki gereklidir)

  • Kenar: Destek