Trình Tạo
CSS Gradient
Trình tạo màu nền gradient (tuyến tính, tỏa tròn, hình nón) và họa tiết pattern bằng CSS trực quan. Hỗ trợ thao tác kéo thả, 24 mẫu preset có sẵn và xem trước theo thời gian thực.
Chỉnh Màu Đang Chọn
Mã CSS Đầu Ra
Mã CSS Đầu Ra
Bạn cũng có thể thích
Về Trình Tạo CSS Gradient
Trình Tạo CSS Gradient là món đồ chơi miễn phí dành cho các nhà phát triển và thiết kế web, giúp bạn thỏa sức sáng tạo các hình nền gradient hay họa tiết bằng CSS thuần túy mà không đụng vào Javascript hay tải bất cứ file ảnh nặng nề nào. Với giao diện người dùng trực quan, bạn có thể tạo đủ các loại gradient - từ Linear, Radial cho tới Conic - rồi xuất code dùng ngay vào dự án.
Tool tích hợp các thanh trượt màu sắc mượt mà, hỗ trợ cả kênh alpha mờ đục. Gói gọn bên trong là 24 mẫu preset thiết kế sẵn cùng 12 bộ tạo mẫu họa tiết (Pattern), cung cấp giải pháp trọn gói từ ý tưởng ban đầu tới triển khai mã hóa ngay trên trình duyệt của bạn.
Các Bước Chế Tác
Chọn Chủng Loại
Mở tab 'Gradient', chọn kiểu lan tỏa bạn thích: tuyến tính, tỏa tròn hay hình nón. Chỉnh góc độ hoặc chọn vị trí tâm điểm để xác định hướng đi của ánh sáng.
Nhét Màu & Kéo Thả
Click thẳng vào dải màu gradient để ném thêm màu vào. Nắm cái đầu mục màu (color stop) kéo qua lại, rồi xài bảng màu bên dưới để mix màu và chỉnh độ mờ ảo.
Review Và Lượm Code
Quan sát ngay thành quả ở khung preview bên phải. Mở lên xem toàn màn hình nếu thích, xong thì nhấp chuột Copy cái đoạn code CSS rinh về xài cho trang web của mình.
Thuật Ngữ Bỏ Túi
- CSS Gradient
- Một kỹ thuật vẽ background chuyển màu từ màu nọ sang màu kia dùng hàm CSS (ví dụ linear-gradient). Thay thế hoàn hảo cho ảnh tĩnh để tiết kiệm băng thông và tăng tốc độ tải trang.
- Color Stop (Mốc màu)
- Là điểm neo màu sắc (chỉ định từ 0% đến 100%) dọc theo đường chạy của gradient. Chèn nhiều mốc màu đứng sít rịt nhau sẽ tạo ra dải phân cách cực bén.
- Gradient Tuyến Tính (linear-gradient)
- Ông hoàng của các loại gradient, màu sắc sẽ trôi theo một đường thẳng dựa theo một góc định trước (VD: 135deg) hay hướng đi (VD: to right).
- Gradient Tỏa Tròn (radial-gradient)
- Đèn pha sân khấu là đây. Màu tỏa từ một điểm tâm thành hình tròn (circle) hoặc bầu dục (ellipse) bung ra bên ngoài.
- Gradient Hình Nón (conic-gradient)
- Màu sắc đổi thay theo chiều kim đồng hồ quanh cái rốn ở giữa. Thần thánh trong việc fake bánh xe màu sắc (color wheel) hay biểu đồ hình tròn tròn trĩnh bằng CSS.
- Hệ màu HSLA
- Khai báo màu dựa trên Sắc độ (Hue), Độ bão hòa (Saturation), Độ sáng (Lightness) và Kênh mờ (Alpha). Đây là hệ màu cực thân thiện với mắt người để pha màu tươi hơn hay nhạt đi.
Hỏi Đáp Nhanh Nhẹn
- Q.Mã CSS này mang đi chạy dự án thương mại có sao không?
- Không sao cả, bạn xài chùa thoải mái cho mục đích thương mại. Mã sinh ra không có bản quyền gì hết.
- Q.Xài tool này trên điện thoại thông minh có mượt không?
- Có, giao diện tương thích hoàn toàn với màn hình nhỏ. Bạn có thể chọt, kéo thả mốc màu trên điện thoại cảm ứng ngon lành.
- Q.Sao gradient không hiện ra trên mấy trình duyệt cổ như IE?
- IE11 và các ông cụ trình duyệt khác không hiểu được các hàm CSS hiện đại (nhất là conic-gradient). Mã của tool này sinh ra dành cho các trình duyệt hiện đại. Hãy kèm theo một background-color màu trơn để phòng hờ.
- Q.Làm sao để chỉnh kích thước của dải họa tiết (pattern)?
- Bên tab Họa tiết có thanh trượt 'Kích cỡ', kéo thả nó là thuộc tính background-size trong CSS sẽ tự động được co giãn theo ý bạn.
- Q.Tôi có lưu cục gradient này về dưới dạng file ảnh được không?
- Bản chất tool này sinh ra code CSS nên không có nút tải ra PNG/JPG. Bù lại, bạn cứ bấm nút Toàn màn hình rồi xài chức năng chụp ảnh màn hình của thiết bị là xong.
Muôn Mặt Cách Chơi
Bơm máu cho Hero Section
Phủ một lớp gradient hoàng hôn hay pastel lên khung hình đầu tiên của website là cách lấy điểm người dùng nhanh nhất.
Hiệu ứng Kính (Glassmorphism)
Hạ độ trong suốt của gradient xuống và pha thêm chút backdrop-filter: blur() là bạn sẽ có mấy cục UI xuyên thấu xịn sò, hiện đại.
Background Họa Tiết Siêu Nhẹ
Tạo chấm bi hay kẻ sọc bằng thuần CSS thay vì file ảnh sẽ giúp website tải nhanh như một cơn gió, không lo rớt điểm PageSpeed.
Vẽ Biểu Đồ Thần Tốc
Bí thuật dùng conic-gradient để vẽ biểu đồ tròn (pie chart) hay vòng lặp tiến độ (progress bar) không cần đến một dòng Javascript nào.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.