Tạo Gradient CSS
Công cụ tạo gradient CSS này giúp bạn thiết kế gradient tuyến tính, tỏa tròn và hình nón một cách trực quan, rồi sao chép code CSS dùng được ngay chỉ với một cú nhấp. Kéo điểm màu, chỉnh góc và tinh chỉnh độ mờ trong khi bản xem trước cập nhật tức thì, nên bạn không bao giờ phải tự gõ tay cú pháp gradient.
Công cụ được làm cho lập trình viên front-end và nhà thiết kế muốn có một nền gradient nhanh, một dải pha nhiều màu hoặc một hiệu ứng mờ dần trong suốt mà không cần thuộc lòng các quy tắc linear-gradient(), radial-gradient() và conic-gradient(). Bắt đầu từ một mẫu có sẵn được chọn lọc hoặc tự dựng từ đầu.
Cách Dùng Công Cụ Tạo Gradient CSS
Chọn loại gradient
Chọn Tuyến tính để pha màu theo đường thẳng, Tỏa tròn để pha theo hình tròn hoặc elip, hoặc Hình nón để màu quét xoay quanh một tâm điểm.
Thêm và chỉnh điểm màu
Nhấp vào thanh gradient để thêm một điểm màu, kéo tay nắm để đổi vị trí, hoặc kéo ra ngoài thanh để xóa. Chỉnh Màu, Vị trí và Độ mờ của từng điểm ngay tại chỗ hoặc trong trình chỉnh điểm màu.
Chỉnh hướng và hình dạng
Với gradient tuyến tính, đặt góc bằng núm xoay, ô nhập hoặc lưới 8 hướng. Với tỏa tròn, chọn hình tròn hay elip cùng vị trí tâm trong lưới 3x3. Với hình nón, đặt góc bắt đầu và tâm điểm.
Sao chép code CSS
Khi bản xem trước đã ưng ý, nhấn Sao chép CSS để lấy trọn quy tắc background và dán thẳng vào tệp stylesheet của bạn.
Tính Năng
Ba Loại Gradient
Dựng gradient tuyến tính, tỏa tròn và hình nón, mỗi loại có bộ điều khiển hướng, hình dạng và vị trí riêng.
Điểm Màu Trực Quan
Nhấp vào thanh gradient để thêm điểm màu, kéo để đổi vị trí, hoặc kéo ra ngoài để xóa với phản hồi tức thì.
Núm Chỉnh Góc & Lưới Hướng
Đặt góc cho gradient tuyến tính từ 0° đến 360° bằng cách kéo núm, nhập giá trị, hoặc dùng lưới 8 hướng nhanh.
Hình Dạng & Vị Trí Tỏa Tròn
Chuyển giữa hình tròn và elip, đặt tâm gradient bằng lưới chín vị trí 3x3 để kiểm soát chính xác.
Độ Mờ Từng Điểm Màu
Giảm độ mờ ở bất kỳ điểm màu nào và kết quả tự chuyển sang RGBA, sẵn sàng cho các hiệu ứng mờ dần trong suốt.
Code CSS Được Tô Màu
Đọc code CSS gradient gọn gàng, tô màu theo cú pháp và sao chép trọn quy tắc background vào clipboard chỉ một cú nhấp.
Hoàn Tác & Làm Lại
Lùi và tiến qua từng thay đổi bằng các nút bấm hoặc phím tắt Ctrl+Z và Ctrl+Y.
Ngẫu Nhiên & Đảo Chiều
Tạo một gradient ngẫu nhiên mới để lấy ý tưởng, hoặc đảo chiều các điểm màu hiện tại ngay lập tức.
46 Mẫu Chọn Lọc Sẵn
Bắt đầu từ thư viện 46 gradient được tuyển chọn theo nhóm màu, rồi tinh chỉnh theo ý thích.
Kết Quả Chuẩn, Riêng Tư
Tạo ra cú pháp gradient CSS thuần chạy được trên mọi trình duyệt hiện đại, tất cả đều xử lý ngay trong trình duyệt của bạn.
Câu Hỏi Thường Gặp
Làm sao để tạo một gradient CSS?
Chọn một loại gradient, thêm điểm màu bằng cách nhấp vào thanh gradient, rồi chỉnh góc, vị trí và độ mờ cho đến khi bản xem trước ưng ý. Nhấn Sao chép CSS để chép quy tắc background hoàn chỉnh vào tệp stylesheet của bạn.
Gradient tuyến tính, tỏa tròn và hình nón khác nhau ra sao?
Gradient tuyến tính pha màu dọc theo một đường thẳng tại góc bạn chọn. Gradient tỏa tròn pha màu lan ra từ một tâm điểm theo hình tròn hoặc elip. Gradient hình nón quét màu xoay quanh một tâm điểm, giống như biểu đồ tròn hay vòng tròn màu.
Làm sao để tạo gradient CSS 3 màu (hoặc nhiều màu)?
Nhấp vào bất kỳ đâu trên thanh gradient để thêm một điểm màu nữa; điểm mới sẽ hòa với các màu xung quanh nó. Lặp lại để thêm bao nhiêu điểm màu tùy ý, rồi kéo từng điểm đến vị trí mong muốn. Một gradient phải luôn giữ ít nhất hai điểm màu.
Làm sao để tạo gradient trong suốt trong CSS?
Giảm Độ mờ ở bất kỳ điểm màu nào trong trình chỉnh điểm màu. Các điểm có độ mờ dưới 100% sẽ được xuất ra dưới dạng giá trị màu RGBA, và họa tiết ô caro trong bản xem trước cho bạn thấy chính xác chỗ nào gradient trở nên trong suốt.
Làm sao để xóa một điểm màu?
Kéo một tay nắm điểm màu ra ngoài thanh gradient để xóa nó, hoặc dùng nút xóa trong trình chỉnh điểm màu. Gradient luôn giữ tối thiểu hai điểm màu, nên bạn không thể xóa hai điểm cuối cùng.
Tôi có thể sao chép code CSS gradient được tạo ra không?
Có. Bảng CSS hiển thị quy tắc background được tô màu theo cú pháp, và nút Sao chép CSS chép trọn vẹn khai báo vào clipboard để bạn dán thẳng vào tệp stylesheet của mình.
Gradient được tạo ra có tương thích với mọi trình duyệt không?
Kết quả dùng cú pháp gradient CSS chuẩn, được hỗ trợ bởi các phiên bản hiện hành của Chrome, Firefox, Safari và Edge, không cần thêm tiền tố nhà cung cấp nào.
Dữ liệu gradient của tôi có được lưu lại ở đâu không?
Không. Mọi gradient đều được tạo hoàn toàn trong trình duyệt của bạn. Không có gì gửi lên máy chủ, và màu sắc cùng thiết kế của bạn không bị lưu trữ hay theo dõi.
Chưa có bình luận nào. Hãy là người đầu tiên!