cv.cm
Tất cả bài học

Lập trình & web

Cách tạo gradient CSS

Bạn muốn một gradient phía sau trang, thẻ hoặc slide, và viết CSS theo kiểu thử rồi sửa thì rất chậm. Bạn sẽ chọn kiểu, đặt màu, rồi sao chép CSS sẵn sàng để dán, hoặc lưu thành ảnh. Công cụ chạy trong trình duyệt.

5 phút

Kết quả hôm nay Một quy tắc CSS background kèm màu dự phòng, hoặc ảnh PNG cỡ 1080p, 1440p, dọc hoặc vuông.

Chữ trên gradient phải dễ đọc ở cả hai đầu. Hãy thử màu sáng nhất và tối nhất với màu chữ bạn định dùng.

Mở Tạo gradient CSS
Trong buổi này

  1. Chọn kiểu gradient

    Linear (thẳng) chuyển màu theo đường thẳng và hợp với hầu hết các nền. Radial (tỏa tròn) lan ra từ tâm, như một quầng sáng dịu. Conic (nón) quét quanh một điểm, như bánh xe màu hoặc biểu đồ tròn.

    Ba kiểu khác nhau ở đường đi của màu.
    Ba kiểu khác nhau ở đường đi của màu.

  2. Mở Tạo gradient CSS trên cv.cm

    Chọn Kiểu trong mục Dải màu. Bấm một mẫu trong Mẫu có sẵn để có điểm khởi đầu, hoặc Ngẫu nhiên để lấy ý tưởng; khung xem trước cập nhật ngay.

    Mở Tạo gradient CSS

  3. Đặt hướng

    Với linear và conic, kéo Góc: 0° chỉ lên, 90° chỉ sang phải, 180° chỉ xuống. Với radial, chọn Tròn hoặc Elip thay vào đó.

  4. Đặt các màu

    Mỗi màu có vị trí từ 0% đến 100%, và bạn có thể dùng tối đa 6 màu. Thêm màu chèn một màu, × xóa nó đi. Vị trí gần nhau tạo cạnh sắc, vị trí xa nhau tạo chuyển màu mềm.

    Mỗi màu nằm tại một vị trí trên đường, và CSS liệt kê chúng theo thứ tự.
    Mỗi màu nằm tại một vị trí trên đường, và CSS liệt kê chúng theo thứ tự.

  5. Sao chép CSS

    Sao chép CSS cho bạn hai dòng: một màu đơn cho trình duyệt rất cũ, rồi đến gradient. Dán chúng vào quy tắc CSS của phần tử. Cách này dùng được với mọi khối có kích thước, như body hoặc một thẻ.

  6. Hoặc lưu thành PNG

    Với slide và hình nền, chọn Kích thước ảnh rồi bấm Lưu PNG. Các cỡ gồm 1920 × 1080, 2560 × 1440, 1080 × 1920 cho điện thoại và 1080 × 1080 cho bài đăng vuông.

Dùng với các công cụ này

Câu hỏi thường gặp

Vì sao gradient không hiện trên trang?

Có thể phần tử không có chiều cao. Gradient lấp đầy hộp của phần tử, nên một khối trống cao 0. Hãy đặt chiều cao hoặc thêm nội dung; với cả trang, đặt html và body cao 100%.

Vì sao CSS có hai dòng background?

Dòng đầu là màu đơn, dòng thứ hai là gradient. Trình duyệt không vẽ được gradient sẽ bỏ qua dòng đó và giữ lại màu.

Nên dùng background hay background-image?

Cả hai đều được, vì gradient được tính là ảnh. background ngắn hơn và cũng đặt lại các thiết lập nền khác, nên hãy dùng background-image nếu bạn xếp nó chồng lên nền khác.

Làm sao để tạo sọc màu sắc nét?

Đặt hai màu ở cùng một vị trí, ví dụ cả hai ở 50%. Khi đó không còn chỗ để chuyển màu, nên màu đổi ngay tại một đường sắc nét.

Vì sao PNG bị phân dải màu?

Gradient rất rộng giữa các màu gần nhau có thể hiện các bậc mờ, vì PNG lưu 256 mức cho mỗi kênh màu. Hãy dùng các màu cách xa nhau hơn, hoặc thêm chút vân trong trình sửa ảnh.