Giới thiệu CSS Gradient Generator
CSS Gradient là gì? Phân biệt Linear và Radial Gradient
CSS Gradient cho phép bạn tạo ra sự chuyển đổi màu sắc (mượt mà) giữa hai hoặc nhiều màu được chỉ định. Nhờ CSS, bạn không cần phải dùng phần mềm Photoshop xuất file ảnh nền nặng nề nữa, giúp trang web load nhanh hơn rất nhiều.
- Linear Gradient (Chuyển sắc tuyến tính): Màu sắc chuyển đổi theo một đường thẳng (Từ trên xuống dưới, từ trái sang phải, hoặc theo một góc độ chéo như 45 độ).
- Radial Gradient (Chuyển sắc tỏa tròn): Màu sắc xuất phát từ một điểm tâm (center) và lan tỏa dần ra xung quanh theo hình tròn hoặc hình elip.
Cách phối màu Gradient chuẩn thiết kế hiện đại
Gradient có thể khiến website trông cực kỳ sành điệu, nhưng nếu lạm dụng sẽ gây hiệu ứng ngược, làm trang web trở nên "quê mùa" và chói mắt. Một số nguyên tắc:
- Sử dụng màu Analogous (Tương đồng): Trộn các màu nằm cạnh nhau trên bánh xe màu (Ví dụ: Cam sang Vàng, hoặc Xanh dương sang Tím). Tránh trộn các màu đối lập trực tiếp (như Đỏ và Xanh lá) vì đoạn chuyển giao ở giữa sẽ tạo ra màu xám đục (Muddy colors).
- Gradient cho Text (Chữ): Gradient không chỉ dùng cho Background. Bằng thuộc tính
background-clip: text; color: transparent;, bạn có thể tạo ra các tiêu đề (Heading) đầy cuốn hút. - Muted Gradient: Pha thêm màu trắng hoặc xám vào Gradient để tạo ra tông màu pastel nhẹ nhàng, thanh lịch.
Hướng dẫn sử dụng CSS Gradient Generator
- Chọn chế độ Linear (Đường thẳng) hoặc Radial (Tỏa tròn).
- Click vào các điểm dừng (Color Stops) trên thanh công cụ để đổi màu, hoặc thêm điểm màu mới.
- Điều chỉnh Hướng (Góc độ) chuyển màu (Góc 135 độ thường được ưa chuộng nhất).
- Sao chép đoạn code
background: linear-gradient(...)để dán vào dự án. Chúng tôi tự động tạo ra cả fallback cho trình duyệt cũ.