SnippetUI
← Back to snippets

Mesh Gradient Động

Đây là thành phần nền phân cấp dạng lưới động, trong đó màu sắc thay đổi và hòa quyện một cách mượt mà, chỉ được triển khai bằng CSS.

HTMLCSS

Nền gradient dạng lưới kết hợp radial-gradient và filter: blur() của CSS để tạo lớp nhiều gradient và tạo hoạt ảnh mượt mà cho chúng.

Xem trước

Mesh Gradient

Smooth flowing colors

Trường hợp sử dụng và tính năng

Dải màu lưới hoạt hình này hoàn hảo cho nền trang web trông hiện đại và năng động.

  • Phần anh hùng: Có thể được sử dụng làm chế độ xem đầu tiên trên trang đích của bạn để thu hút sự chú ý của khách truy cập.

  • Màn hình xác thực: Làm cho màn hình đăng nhập và đăng ký trở nên đơn giản, hấp dẫn hơn.

  • Nền thẻ: Thích hợp cho nền của giao diện người dùng thẻ tín dụng và các thành phần muốn nhấn mạnh cảm giác cao cấp.

  • Các tính năng chính:

    • Nó nhẹ vì chỉ được triển khai bằng CSS và không phụ thuộc vào Canvas hay WebGL.

    • Sự kết hợp giữa mix-blend-mode: screen và filter: blur() cho phép màu sắc hòa trộn đẹp mắt và tự nhiên.

    • will-change: transform được chỉ định để xem xét hiệu suất kết xuất.

Điểm thiết kế và UX

  • Hoạt ảnh tự nhiên: Khoảng thời gian (thời lượng) hoạt ảnh của mỗi phần tử hình tròn được dịch chuyển để tạo ra các chuyển động không đều và tự nhiên.

  • Hòa hợp màu sắc: Các màu tương phản mạnh như hồng neon, xanh sống động, lục lam và vàng được sắp xếp để tạo chiều sâu khi phối với nhau.

  • Khả năng tương thích với hình thái thủy tinh: Bằng cách áp dụng backdrop-filter (làm mờ nền) cho nội dung nền trước, bạn có thể tạo giao diện người dùng hiện đại trong đó độ chuyển màu của nền trong suốt đẹp mắt.

Cách tùy chỉnh

  • Thay đổi màu sắc: Bạn có thể tạo một dải màu gốc phù hợp với màu thương hiệu của mình bằng cách thay đổi màu của radial-gradient trong lớp .mesh-blob-*.

  • Điều chỉnh hoạt ảnh: Giảm mức độ chuyển động của translate trong @keyframes float* dẫn đến chuyển động khiêm tốn và nhẹ nhàng hơn.

  • Cường độ mờ: Bằng cách điều chỉnh giá trị của filter: blur(60px) trong .mesh-bg, có thể làm cho ranh giới màu rõ ràng hơn hoặc trộn chúng mượt mà hơn.

Mã triển khai

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

Trạng thái tương thích với trình duyệt

  • Chrome: Hỗ trợ

  • Firefox: Hỗ trợ

  • Safari: Được hỗ trợ (cần có tiền tố -webkit-backdrop-filter để làm mờ nội dung nền trước)

  • Cạnh: Hỗ trợ