SUPER ADMIN
- Joined
- Sep 3, 2025
- Messages
- 267
- Reaction score
- 17
5
MONTHS
5
MONTHS OF SERVICE
Gradients không chỉ làm giao diện trở nên sống động mà còn giúp dẫn mắt, tạo chiều sâu, và nhấn mạnh các khu vực quan trọng trên trang web. Dưới đây là 3 trang web gradient tốt nhất, dễ dùng, giàu preset và hỗ trợ xuất CSS nhanh chóng, phù hợp cho cả designer lẫn developer.
uiGradients là "huyền thoại" trong cộng đồng front-end với bộ sưu tập lớn các preset gradient đã được tuyển chọn kỹ. Ưu điểm là điều hướng cực kỳ đơn giản, tên preset dễ nhớ, và thao tác copy CSS chỉ với một cú nhấp. Ngoài ra, có thể tải nhanh ảnh nền JPG nếu muốn dùng làm background thay vì CSS.
- Điểm mạnh:
- Nhiều preset đẹp, sẵn dùng.
- Copy CSS tức thì; hỗ trợ export nhanh.
- Giao diện tối giản, dễ tìm màu theo nhóm.
- Gợi ý sử dụng:
- Tuyệt vời cho hero section, cover blocks, banner CTA.
- Phối cùng hiệu ứng overlay để đặt text có độ tương phản cao.
MyColor.space/gradient mạnh ở khả năng tạo gradient tùy biến dựa trên một màu gốc. Chỉ cần chọn 1 màu, công cụ sẽ gợi ý nhiều biến thể gradient hài hòa, giúp bạn tiết kiệm thời gian lúc cần đồng bộ nhận diện màu cho thương hiệu.
- Điểm mạnh:
- Sinh nhiều phương án gradient từ 1 màu chính.
- Cho phép tinh chỉnh, xem trước và copy CSS nhanh.
- Phù hợp khi muốn đảm bảo tính nhất quán màu thương hiệu.
- Gợi ý sử dụng:
- Lý tưởng cho hệ thống design system: background thẻ, badge, nút nổi bật.
- Dùng để tạo các trạng thái khác nhau (hover/active) theo cùng palette.
WebGradients cung cấp hơn 180 gradient chất lượng, tập trung cho web UI và tối ưu trải nghiệm copy-paste CSS. Mỗi preset đều có tên, mã HEX và snippet CSS rõ ràng, giúp developer đưa vào dự án một cách tức thời.
- Điểm mạnh:
- Bộ sưu tập lớn, thân thiện với developer.
- Mỗi gradient có sẵn CSS, tải PNG nếu cần.
- Phong cách hiện đại, phù hợp giao diện sản phẩm số.
- Gợi ý sử dụng:
- Background section xen kẽ, card nổi bật, overlay cho hình minh họa.
- Kết hợp mask/clip-path để tạo mảng màu sinh động.
Thêm các lớp CSS sau vào stylesheet. Thay đổi góc, mã màu hoặc tên lớp theo preset bạn chọn từ ba trang trên.
Code:
/* 1) Gradient nền hero */
.bg-hero-gradient {
/* Linear gradient 120deg: thay #a1c4fd và #c2e9fb theo preset */
background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
/* 2) Gradient cho nút (kèm trạng thái hover) */
.btn-gradient {
background: linear-gradient(90deg, #ff9966 0%, #ff5e62 100%);
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 10px;
font-weight: 600;
transition: filter 0.2s ease, transform 0.05s ease;
}
.btn-gradient:hover {
filter: brightness(1.05);
}
.btn-gradient:active {
transform: translateY(1px);
}
/* 3) Gradient viền (border) sử dụng border-image */
.border-gradient {
border: 3px solid transparent;
border-image: linear-gradient(45deg, #8e2de2, #4a00e0) 1;
border-radius: 12px;
}
/* 4) Overlay gradient giúp text dễ đọc trên ảnh nền */
.overlay-gradient {
position: relative;
}
.overlay-gradient::after {
content: "";
position: absolute;
inset: 0;
/* Gradient đậm dần từ dưới lên */
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
/* 5) Radial gradient làm điểm nhấn */
.radial-highlight {
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%),
linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}
/* 6) Text gradient (đổ màu cho chữ) */
.text-gradient {
background: linear-gradient(90deg, #00c6ff, #0072ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 7) Skeleton/loading shimmer với gradient chuyển động */
.shimmer {
background: linear-gradient(90deg, #eeeeee 25%, #f5f5f5 37%, #eeeeee 63%);
background-size: 400% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}HTML mẫu để áp dụng:
Code:
<section class="bg-hero-gradient" style="padding:80px 0;">
<div class="container">
<h1 class="text-gradient">Thiết kế rực rỡ với Gradient</h1>
<p>Thêm chiều sâu và nhịp điệu thị giác cho giao diện.</p>
<button class="btn-gradient">Bắt đầu ngay</button>
</div>
</section>
<div class="border-gradient" style="padding:16px; margin-top:24px;">
Đây là một khối nội dung với viền gradient.
</div>
<div class="overlay-gradient" style="margin-top:24px;">
<img src="your-image.jpg" alt="Hero" style="width:100%; display:block;">
<!-- Overlay giúp chữ nổi bật trên ảnh -->
<div style="position:absolute; bottom:16px; left:16px; right:16px; color:#fff;">
<h2>Tiêu đề nổi bật</h2>
<p>Mô tả ngắn gọn.</p>
</div>
</div>Mẹo chọn và áp dụng gradient hiệu quả
- Ưu tiên tương phản: Đảm bảo text trên nền gradient có độ tương phản đủ cao; thêm overlay tối/nhạt khi cần.
- Tiết chế số màu: 2–3 màu là lý tưởng cho phần lớn UI; dùng 4+ màu cho hero hoặc hình minh họa.
- Hướng gradient có chủ đích: Dùng góc 90deg/180deg cho bố cục phẳng, 120–135deg tạo cảm giác chuyển động tự nhiên.
- Nhất quán thương hiệu: Khởi đầu từ màu chủ đạo, sau đó mở rộng sang các biến thể sáng/tối gần kề.
- Kiểm tra trên nhiều màn hình: Màn hình khác nhau thể hiện chuyển sắc khác nhau; thử trên dark/light mode và mobile.
