Trình tạo css gradient tuyến tính

Trình tạo độ dốc CSS trực tuyến miễn phí, trình tạo là cách dễ nhất để tạo độ dốc màu cho nền của bạn

Với trình tạo độ dốc màu CSS, bạn có thể tạo, lưu, chia sẻ và khám phá độ dốc nền thú vị của mình với nhóm và bạn bè của mình

Chuyển màu là sự kết hợp của hai hoặc nhiều màu trong đó quá trình chuyển đổi giữa các màu mượt mà. Những gradient này hữu ích cho nền, biểu ngữ và nút

Có 4 loại gradient có thể tạo ở đây
tuyến tính, hướng tâm, hình elip, hình nón (góc)

Tạo mã gradient ở định dạng CSS, RGBA, HEX, Canvas, SVG, SwiftUI và Android XML. Ngoài ra, bạn cũng có thể tạo hình ảnh gradient và tải xuống

Chuyển màu tuyến tính được tạo bằng cách chỉ định một đường chuyển màu thẳng, sau đó một số màu được đặt dọc theo đường đó. Hình ảnh được xây dựng bằng cách tạo một khung vẽ vô hạn và vẽ nó bằng các đường vuông góc với đường chuyển màu, với màu của đường được vẽ là màu của đường chuyển màu nơi hai đường giao nhau. Điều này tạo ra sự mờ dần từ từng màu sang màu tiếp theo, tiến triển theo hướng đã chỉ định

Trọng tâm chính của tôi bây giờ là dạy các nhà phát triển front-end cách làm những thứ hay ho. Bản tin cá nhân của tôi được gửi vài tuần một lần và bao gồm nội dung bổ sung chỉ dành cho người đăng ký

Không có thư rác, không vô nghĩa. Hủy đăng ký bất cứ lúc nào

Nếu bạn là người, vui lòng bỏ qua trường này

lai lịch. -moz-tuyến tính-gradient(); . 6-15 */

lý lịch. -webkit-gradient();

lai lịch. -webkit-tuyến tính-gradient(); . 1-6 */

lai lịch. -o-linear-gradient(); . 10-11. 50 */

lý lịch. -ms-tuyến tính-gradient();

lai lịch. độ dốc tuyến tính();

lọc. thần đồng. DXImageTransform. Microsoft. dốc();

Chuyển màu là các thành phần CSS của loại dữ liệu image hiển thị sự chuyển đổi giữa hai hoặc nhiều màu. Các chuyển đổi này được hiển thị dưới dạng tuyến tính hoặc xuyên tâm. Bởi vì chúng thuộc loại dữ liệu image, nên có thể sử dụng độ dốc ở bất kỳ đâu mà hình ảnh có thể. Việc sử dụng phổ biến nhất cho độ dốc sẽ là trong phần tử nền

Nói một cách phù hợp hơn, gradient là một phần của xu hướng thiết kế cực kỳ phổ biến đã trở nên phổ biến trong vài năm qua. Có vẻ như họ luôn ở trong nền (không có ý định chơi chữ); . Tất nhiên, thật khó để một thứ gì đó quay trở lại nếu nó không bao giờ rời đi, nhưng chúng tôi sẽ giải quyết vấn đề đó theo ngữ nghĩa

Chuyển màu cho phép bạn—nhà thiết kế—khám phá các cơ hội mới để cung cấp các thiết kế mới, rõ ràng cho khán giả của bạn. Sự chuyển tiếp bổ sung giữa các màu sắc cho phép bạn thử nghiệm với các khía cạnh hai chiều và dường như là ba chiều, biến thiết kế của bạn từ nhàm chán thành phi thường với một số mã đơn giản

Trên thực tế, điều tốt nhất về mã gradient là nó có thể đơn giản hoặc phức tạp như bạn muốn. Bạn có thể thực hiện ở mức tối thiểu và để trình duyệt tìm ra phần còn lại hoặc bạn có thể tự mình xử lý mọi việc và xác định tất cả các tỷ lệ cược và kết thúc. Bạn thậm chí có thể làm thêm một chút nếu muốn và khám phá khả năng vô tận của chuyển màu

Độ dốc tuyến tính

Chuyển đổi trong gradient tuyến tính xảy ra dọc theo một đường thẳng được xác định bởi một góc hoặc hướng. Một gradient tuyến tính CSS có thể được mã hóa bằng cách sử dụng hàm linear-gradient() và có thể đơn giản hoặc phức tạp như bạn muốn. Ít nhất, bạn sẽ chỉ cần hai màu để bắt đầu. Từ đó, bạn có thể thêm nhiều màu sắc, góc, hướng và hơn thế nữa để tùy chỉnh độ dốc của mình hơn nữa

Mã số

background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);

Kết quả

Nếu bạn để mã ở kiểu dáng cơ bản nhất, các thành phần khác sẽ được trình duyệt tự động xác định. Điều này bao gồm hướng hoặc góc và vị trí dừng màu. Để có kiểu dáng tùy chỉnh hơn, bạn có thể chỉ định các giá trị này để tạo độ dốc vui nhộn với nhiều màu hoặc hướng góc cạnh. Chơi với các vị trí dừng màu cũng có thể khiến bạn có một mẫu đồng nhất thay vì một dải màu truyền thống. Khả năng là vô tận

So với chuyển sắc xuyên tâm, chuyển sắc tuyến tính chắc chắn phổ biến hơn trong kỹ thuật thiết kế và xây dựng thương hiệu. Ví dụ: bạn có thể đã nhận thấy công ty phát nhạc trực tuyến nổi tiếng Spotify và thương hiệu gradient của họ gần đây. Chuyển màu tuyến tính có lẽ là cách dễ nhất để kết hợp xu hướng này vào các sáng tạo của bạn, vì chúng dường như kết hợp nhuần nhuyễn với các yếu tố thiết kế khác

Độ dốc xuyên tâm

Chuyển màu xuyên tâm CSS—mặc dù ít được nhìn thấy hơn—cũng đẹp và thú vị như chuyển màu tuyến tính và có thể được triển khai dễ dàng. Như đã nói, lúc đầu mã có vẻ khó hiểu hơn. Chính vì lý do này mà đối với một số nhà thiết kế, có thể dễ dàng hơn khi bắt đầu với một dải màu tuyến tính.

Mã số

background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);

Kết quả

Tất nhiên, mã thực sự không quá phức tạp. Trên thực tế, hầu hết mã hoàn toàn giống với mã của gradient tuyến tính—chỉ với một vài chỉnh sửa để tùy chỉnh hướng tâm bổ sung. Ví dụ: không giống như chuyển màu tuyến tính, bạn thực sự có thể điều chỉnh kích thước của chuyển màu xuyên tâm ở vị trí mà hướng thường đi. Chơi với các giá trị khác nhau xác định các kích thước này có thể mang lại cho bạn nhiều kết quả khác nhau

Mặc dù độ dốc xuyên tâm có thể không phổ biến như độ dốc tuyến tính của chúng, nhưng có thể bạn đã nhìn thấy chúng thường xuyên hơn bạn nghĩ. Các kỹ thuật CSS đặc biệt có thể để lại cho bạn những thiết kế có thể không nhận ra được khi nói đến ý tưởng điển hình về một gradient tuyến tính hoặc hướng tâm có thể trông như thế nào. Cuối cùng, độ dốc hướng tâm cũng rất mạnh mẽ để sử dụng và có thể mang lại cho thiết kế của bạn thêm một điều gì đó đặc biệt