SnippetUI
← Back to snippets

Mesh Gradient Animasi

Ini adalah komponen latar belakang gradasi mesh dinamis di mana warna berubah dan bercampur dengan mulus, diimplementasikan hanya dengan menggunakan CSS.

HTMLCSS

Latar belakang gradien mesh yang menggabungkan radial-gradient dan filter: blur() CSS untuk melapisi beberapa gradien dan menganimasikannya dengan lancar.

Pratinjau

Mesh Gradient

Smooth flowing colors

Kasus penggunaan dan fitur

Gradien mesh animasi ini sangat cocok untuk background website yang terlihat modern dan dinamis.

  • Bagian Pahlawan: Dapat digunakan sebagai tampilan pertama laman landas Anda untuk menarik perhatian pengunjung Anda.

  • Layar otentikasi: Membuat layar login dan pendaftaran yang cenderung sederhana menjadi lebih menarik.

  • Latar belakang kartu: Cocok untuk latar belakang UI kartu kredit dan elemen yang ingin menekankan kesan premium.

  • Fitur utama:

    • Ringan karena diimplementasikan hanya dengan CSS dan tidak bergantung pada Canvas atau WebGL.

    • Kombinasi mix-blend-mode: screen dan filter: blur() memungkinkan warna berpadu indah dan alami.

    • will-change: transform ditentukan untuk mempertimbangkan kinerja rendering.

Poin desain dan UX

  • Animasi organik: Periode (durasi) animasi setiap elemen melingkar digeser untuk menciptakan gerakan yang tidak teratur dan alami.

  • Harmoni Warna: Warna-warna yang sangat kontras seperti merah muda neon, biru cerah, sian, dan kuning disusun untuk menciptakan kedalaman saat dipadukan.

  • Kompatibilitas dengan morfisme kaca: Dengan menerapkan backdrop-filter (latar belakang buram) ke konten latar depan, Anda dapat membuat UI modern dengan gradasi latar belakang transparan yang indah.

Cara menyesuaikan

  • Perubahan warna: Anda dapat membuat gradien asli yang cocok dengan warna merek Anda hanya dengan mengubah warna radial-gradient di kelas .mesh-blob-*.

  • Penyesuaian animasi: Mengurangi jumlah pergerakan translate di @keyframes float* menghasilkan gerakan yang lebih sederhana dan lembut.

  • Kekuatan blur: Dengan menyesuaikan nilai filter: blur(60px) di .mesh-bg, batas warna dapat dibuat lebih jelas atau memadukannya dengan lebih halus.

Kode implementasi

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

Status kompatibilitas peramban

  • Chrome: Dukungan

  • Firefox: Dukungan

  • Safari: Didukung (awalan -webkit-backdrop-filter diperlukan untuk mengaburkan konten latar depan)

  • Tepi: Dukungan