CSS Gradients và Box Shadows: Hướng Dẫn Trực Quan Toàn Diện
Nắm vững CSS linear gradients, radial gradients, conic gradients và multi-layer box shadows — với các mẫu thực tiễn và công cụ tạo code sẵn sàng cho môi trường production.
CSS gradients và box shadows là hai công cụ trực quan mạnh mẽ nhưng ít được khai thác nhất trong bộ công cụ của một nhà phát triển web. Khi sử dụng đúng cách, chúng tạo thêm chiều sâu, thứ bậc và sự tinh tế cho giao diện. Khi dùng sai, chúng sẽ khiến mọi thứ trông như một trang web năm 2009. Hướng dẫn này sẽ dạy bạn cả về cơ chế lẫn cách dùng sao cho đẹp.
CSS Gradients
Linear Gradients
Loại gradient phổ biến nhất. Chuyển từ màu này sang màu khác theo đường thẳng.
/* Cơ bản từ trái sang phải */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* Đường chéo */
background: linear-gradient(135deg, #667eea, #764ba2);
/* Nhiều điểm dừng */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);
/* Với độ trong suốt */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
/* Dừng cứng (không pha trộn) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);
Góc có thể được chỉ định bằng độ (0deg = dưới lên trên, 90deg = trái sang phải) hoặc bằng từ khóa (to top, to right, to bottom-right).
Radial Gradients
Tỏa ra từ một điểm trung tâm.
/* Gradient hình tròn */
background: radial-gradient(circle, #667eea, #764ba2);
/* Hình elip (mặc định) */
background: radial-gradient(ellipse, #f093fb, #f5576c);
/* Tâm được đặt vị trí */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);
/* Hiệu ứng đèn chiếu */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
Radial gradients rất phù hợp cho hiệu ứng đèn chiếu, ánh sáng phát sáng và vignette.
Conic Gradients
Quét xung quanh một điểm trung tâm — giống như bánh xe màu sắc hoặc biểu đồ tròn.
/* Bánh xe màu */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
/* Phân đoạn biểu đồ tròn */
background: conic-gradient(
#3b82f6 0% 35%,
#8b5cf6 35% 60%,
#10b981 60% 80%,
#f59e0b 80% 100%
);
/* Hoa văn bàn cờ */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;
Gradient trên văn bản
Một trong những hiệu ứng UI hiện đại phổ biến nhất:
.gradient-text {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
Gradient phủ lên hình ảnh
Không thể thiếu để văn bản dễ đọc trên ảnh:
.hero {
background-image:
linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
url('hero.jpg');
background-size: cover;
}
Sử dụng CSS Gradient Generator của chúng tôi để tạo gradient trực quan với bản xem trước trực tiếp và sao chép CSS chỉ với một cú nhấp chuột.
Box Shadows
Cú pháp của box-shadow
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
- offset-x / offset-y — vị trí bóng đổ (dương = phải/xuống)
- blur-radius — 0 = cạnh sắc, giá trị cao hơn = mềm hơn
- spread-radius — dương làm bóng to ra, âm làm bóng thu nhỏ lại
- inset — vẽ bóng bên trong phần tử thay vì bên ngoài
Bóng đổ cơ bản
/* Nâng cao tinh tế */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* Bóng thẻ card */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
/* Bóng modal lớn */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
/* Bóng đổ cứng (không blur) */
box-shadow: 4px 4px 0px #1e293b;
Multi-layer shadows
Nhiều bóng có thể được xếp chồng bằng dấu phẩy. Đây là chìa khóa để tạo bóng đổ chân thực:
/* Material Design elevation */
box-shadow:
0 2px 1px -1px rgba(0,0,0,0.2),
0 1px 1px 0 rgba(0,0,0,0.14),
0 1px 3px 0 rgba(0,0,0,0.12);
/* Xếp lớp tạo chiều sâu */
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07);
Cách tiếp cận thứ hai phân bổ năng lượng bóng đổ qua nhiều lớp, tạo ra hiệu ứng suy giảm chiều sâu tự nhiên hơn.
Inset shadows
Vẽ bóng bên trong phần tử — lý tưởng cho trạng thái nhấn và các trường nhập liệu:
/* Trạng thái nút được nhấn */
button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* Trường nhập liệu có chiều sâu */
input {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
/* Ánh sáng bên trong kính mờ */
.glass {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 4px 20px rgba(0,0,0,0.2);
}
Bóng đổ có màu sắc
Bóng đổ không nhất thiết phải màu đen. Bóng có màu tạo thêm sức sống:
/* Nâng cao có màu */
.btn-primary {
background: #3b82f6;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
/* Ánh sáng phát sáng chế độ tối */
.card {
background: #1e293b;
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}
Hiệu ứng chuyển đổi bóng mượt mà
Tạo hiệu ứng động cho bóng khi hover để có tương tác thú vị:
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
Kết hợp gradients và shadows
Các giao diện hoàn thiện nhất sử dụng gradients và shadows cùng nhau:
.premium-card {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 4px 6px -1px rgba(0,0,0,0.2),
0 20px 40px -5px rgba(0,0,0,0.4);
}
.gradient-button {
background: linear-gradient(135deg, #667eea, #764ba2);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: all 0.2s;
}
.gradient-button:hover {
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
transform: translateY(-1px);
}
Công cụ giúp làm việc nhanh hơn
- CSS Gradient Generator — Tạo gradient trực quan với nhiều điểm dừng, góc và loại khác nhau. Xem trước trực tiếp với tính năng sao chép một cú nhấp.
- CSS Box Shadow Generator — Xếp lớp nhiều bóng, điều chỉnh blur/spread/màu sắc và nhận CSS sẵn sàng production ngay lập tức.
- Color Format Converter — Chuyển đổi giữa HEX, RGB, HSL và RGBA — không thể thiếu khi đặt độ mờ của bóng.
- Color Palette Generator — Tạo bảng màu bổ sung, tương tự và đơn sắc để tìm cặp màu gradient hoàn hảo.
Gradients và shadows tuân theo quy tắc giống như mọi thiết kế tốt: sự kiềm chế. Một bóng đổ hay gradient được tạo ra khéo léo sẽ nâng tầm một thành phần. Hàng tá bóng cạnh tranh nhau sẽ chỉ tạo ra sự lộn xộn. Hãy nắm vững các kỹ thuật, rồi sử dụng chúng một cách có chủ đích.