CSS Gradient Generator
Create CSS gradients
Create CSS gradients Chạy cục bộ trong trình duyệt của bạn
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
Trình tạo gradient CSS xây dựng một gradient tuyến tính hoặc xuyên tâm thực sự từ hai màu và một góc, hiển thị kích thước đầy đủ và cung cấp cho bạn CSS. Góc là phần mà mọi người hiểu sai: trong CSS, 0deg hướng lên trên và hướng quay theo chiều kim đồng hồ, do đó 90deg chạy từ trái sang phải và 180deg chạy từ trên xuống dưới. Hiểu sai điều đó là lý do tại sao độ dốc thường bị lộn ngược trong lần đầu tiên. Cả hai màu đều có thể mang giá trị alpha gồm tám chữ số, đó là cách bạn làm mờ dần dải màu trên hình ảnh chính.
Where people use the
- Xây dựng hình nền anh hùng mờ nhạt giữa hai màu sắc thương hiệu.
- Kiểm tra xem góc nào có vẻ đúng trước khi cam kết nó trong mã.
- Tạo độ dốc dọc tinh tế cho thẻ hoặc nút.
- Tạo lớp phủ bán trong suốt làm tối ảnh.
How to use the
- 1
Chọn màu bắt đầu và kết thúc
Sử dụng bộ chọn màu hoặc nhập giá trị hex. Bản xem trước và cập nhật CSS khi bạn thay đổi chúng.
- 2
Chọn tuyến tính hoặc xuyên tâm
Tuyến tính chạy ngang qua hộp ở một góc đã chọn. Bán kính lan ra ngoài từ tâm dưới dạng một vòng tròn.
- 3
Đặt góc
Kéo thanh trượt từ 0 đến 360 độ. Hãy nhớ điểm 0 độ lên, điểm 90 độ phải, điểm xuống 180 độ, điểm 270 độ trái.
- 4
Sao chép CSS
Quy tắc này là một khai báo nền mà bạn có thể dán thẳng vào biểu định kiểu hoặc vào thuộc tính hình nền nếu muốn.
Lời khuyên và phương pháp hay nhất
- Ưu tiên chênh lệch độ sáng nhỏ cho nền có văn bản; nó đọc như một kết cấu hơn là sự phân tâm.
- Đối với văn bản có dải màu, hãy kiểm tra độ tương phản ở điểm sáng nhất và tối nhất chứ không chỉ ở mức trung bình.
- Giữ độ dốc ở hai hoặc ba điểm dừng; có xu hướng trông lầy lội hơn.
Câu hỏi thường gặp
Góc đó chỉ hướng nào?
Độ 0 hướng về phía trên cùng của phần tử và góc tăng theo chiều kim đồng hồ. Vậy 90 độ hướng về bên phải và 180 độ hướng xuống dưới. Điều này phản trực giác nếu bạn đã quen với các góc toán học được đo ngược chiều kim đồng hồ từ bên phải.
Tại sao độ dốc của tôi trông có dải?
Bởi vì hai màu có độ chói gần nhau sẽ tạo ra các bước hiển thị trên màn hình 8 bit, đặc biệt là trên một khu vực rộng lớn. Việc thêm điểm dừng thứ ba tinh tế hoặc sử dụng phạm vi độ sáng rộng hơn một chút thường sẽ ẩn điểm dừng đó.
Tôi có thể sử dụng tính minh bạch không?
Đúng. Sử dụng giá trị hex gồm tám chữ số, chẳng hạn như 667eea00 cho độ trong suốt hoàn toàn hoặc 667eea80 cho một nửa và độ dốc sẽ mờ dần trên bất cứ thứ gì nằm phía sau nó.
Độ dốc có được hỗ trợ ở mọi nơi không?
Độ dốc tuyến tính và xuyên tâm được hỗ trợ trong mọi trình duyệt hiện tại mà không cần tiền tố. Tiền tố nhà cung cấp chỉ cần thiết cho các phiên bản Safari và Android rất cũ, điều này trên thực tế có nghĩa là không có gì được xây dựng sau khoảng năm 2015.
Tại sao gradient của tôi không hiển thị?
Bởi vì phần tử không có chiều cao. Một dải màu được vẽ vào hộp của phần tử, do đó, một div trống sẽ thu gọn về độ cao bằng 0 và không hiển thị gì. Đặt chiều cao hoặc thêm nội dung.
Nó có tạo ra nhiều hơn hai điểm dừng màu không?
Không, công cụ này xử lý được hai việc. Đối với dải chuyển màu có nhiều điểm dừng, hãy lấy CSS mà nó tạo ra và thêm các điểm dừng bằng tay; cú pháp chỉ đơn giản là nhiều cặp màu và phần trăm được phân tách bằng dấu phẩy.