Trình tạo CSS Gradient là gì?

Trình tạo CSS Gradient trực tuyến miễn phí. Tạo gradient tuyến tính, xuyên tâm và hình nón với xem trước trực tiếp và tạo mã CSS tương ứng.

Gradient CSS là một trong những cách hiệu quả nhất để thêm chiều sâu, không khí và sức hấp dẫn thị giác vào thiết kế web mà không cần phụ thuộc vào hình ảnh bên ngoài. Một gradient được chọn lựa kỹ càng có thể biến một nền phẳng thành thứ gì đó có cảm giác tinh tế và có chủ đích. Trình Tạo Gradient CSS (CSS Gradient Generator) khiến việc tạo các gradient này trở nên trực quan: chọn tuyến tính hoặc xuyên tâm, chọn màu sắc, điều chỉnh góc hoặc vị trí và sao chép mã CSS sẵn sàng sử dụng.

Gradient tuyến tính chuyển đổi màu sắc dọc theo một đường thẳng. Điều chỉnh góc từ 0 đến 360 độ — 0deg đi từ dưới lên trên, 90deg đi từ trái sang phải, 180deg đi từ trên xuống dưới và 270deg đi từ phải sang trái. Gradient xuyên tâm tỏa ra từ một điểm trung tâm theo mẫu hình tròn hoặc elip. Định vị điểm trung tâm bằng các thanh trượt ngang và dọc, để gradient có thể xuất phát từ bất kỳ góc hoặc cạnh nào thay vì trung tâm mặc định.

Cả hai loại gradient đều hỗ trợ 2 đến 3 điểm dừng màu. Mỗi điểm dừng có bộ chọn màu riêng, nên bạn có thể tinh chỉnh mọi màu trong quá trình chuyển đổi. Bản xem trước trực tiếp cập nhật khi bạn điều chỉnh bất kỳ thông số nào, cho bạn phản hồi trực quan tức thì. Sáu gradient cài sẵn được đưa vào làm điểm khởi đầu — bấm một trong số chúng để tải vào trình chỉnh sửa, sau đó tùy chỉnh màu sắc và góc để khớp với thiết kế của bạn.

Mã CSS được sao chép đã sẵn sàng cho sản xuất. Nó sử dụng cú pháp linear-gradient() hoặc radial-gradient() chuẩn với các tiền tố nhà cung cấp nơi cần, nên hoạt động trong Chrome, Firefox, Safari và Edge. Dán nó trực tiếp vào thuộc tính background hoặc background-image trong bảng định kiểu của bạn. Không cần dọn dẹp hoặc sửa đổi — mã được định dạng sạch sẽ và sẵn sàng sử dụng ngay.

Gradient linh hoạt hơn cả việc làm nền đơn giản. Dùng chúng cho hiệu ứng phủ — một lớp phủ gradient bán trong suốt trên ảnh hero cải thiện độ dễ đọc của văn bản bằng cách làm tối các cạnh trong khi giữ phần trung tâm sáng hơn. Tạo phần lấp đầy thanh tiến trình nơi màu sắc chuyển từ màu thương hiệu sang một sắc thái bổ sung để biểu thị mức độ hoàn thành. Thiết kế các thành phần thẻ với viền gradient tinh tế bằng cách kết hợp nền gradient với vùng bên trong trong suốt dùng CSS background-clip. Và cho các hiệu ứng kính mờ (glassmorphism) hiện đại, chồng một gradient bán trong suốt lên một phông nền được làm mờ — gradient thêm chiều sâu vào thứ lẽ ra là một tấm kính mờ phẳng.