Trình tạo đường viền gradient CSS

Tạo các viền gradient tuyệt đẹp với thuộc tính border-image. Điều chỉnh màu sắc, độ rộng, bán kính và góc, sau đó sao chép CSS.

135°
Khu vực xem trước
Mã CSS 

    



    

      
Cách thức hoạt động

      
    
        
  1. Chọn các màu: chọn hai hoặc nhiều màu cho gradient qua các bộ chọn.
    2. 
        
  2. Điều chỉnh độ rộng và bán kính: điều chỉnh độ dày và độ tròn của các góc theo thiết kế của bạn.
    3. 
        
  3. Sao chép CSS: mã được tạo qua border-image hoặc kỹ thuật pseudo-element sẵn sàng để dán vào stylesheet của bạn.
    4. 
      


      
Tại sao sử dụng trình tạo viền gradient này?

      
Các viền gradient CSS là một chi tiết thiết kế ấn tượng được sử dụng trong các framework UI hiện đại, các thẻ, các trạng thái hover của nút và các phần được làm nổi bật. Tuy nhiên, thuộc tính CSS border chỉ chấp nhận các màu đặc, tạo một viền gradient yêu cầu một mẹo thông qua border-image hoặc một pseudo-element với các thao tác background-clip. Trình tạo này bao gồm cả hai kỹ thuật và tạo ra một CSS sạch sẽ, sẵn sàng để sao chép, để bạn tập trung vào thiết kế thay vì cú pháp.


      
Tính năng

      

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

      

        Tại sao tôi không thể sử dụng border-image với border-radius?
        
border-image hoàn toàn thay thế việc kết xuất của viền và bỏ qua border-radius, các góc vẫn vuông. Để kết hợp viền gradient và các góc bo tròn, sử dụng kỹ thuật pseudo-element: áp dụng gradient làm nền của một ::before và background-clip: padding-box trên chính phần tử.

      

      

        Tôi có thể animate các viền gradient không?
        
Có. Các viền gradient được tạo bằng phương pháp background + pseudo-element có thể được animate bằng cách chuyển tiếp background-position trên gradient. Áp dụng background-size: 300% 300% và animate background-position cho một hiệu ứng mượt mà.

      

      

        Nó có hoạt động trên các nút và các trường nhập liệu không?
        
Có, CSS được tạo hoạt động trên bất kỳ phần tử HTML nào. Đối với các nút, ưu tiên pseudo-element để bảo tồn border-radius. Đối với các trường nhập liệu, áp dụng kỹ thuật border-image hoặc bao bọc trường trong một container gradient.

      

    


    
    

      
Viền gradient CSS thực sự giải quyết điều gì

      
Thuộc tính CSS border chấp nhận một màu rắn duy nhất, không phải gradient. Đây là một hạn chế thời 1996 còn sót lại trong CSS hiện đại. Trong phần lớn lịch sử web, các nhà thiết kế muốn một đường viền gradient quanh một thẻ hoặc nút phải lựa chọn giữa việc sử dụng một hình ảnh nền (raster, không co giãn), bọc phần tử trong một container có màu (hoạt động nhưng phá vỡ bố cục theo những cách tinh tế), hoặc chấp nhận viền rắn. Viền gradient CSS là các giải pháp tạm thời mô phỏng vẻ ngoài của border: 3px solid linear-gradient(...) thông qua các thuộc tính CSS khác, vì cú pháp chính xác đó không tồn tại.

      
Hai kỹ thuật chiếm ưu thế. border-image (CSS Backgrounds and Borders Module Level 3, 2012) thay thế việc kết xuất viền bằng một gradient hoặc hình ảnh. Nó hoạt động, nhưng border-image hoàn toàn bỏ qua border-radius: các góc vẫn vuông. Kỹ thuật pseudo-element + background-clip sử dụng một phần tử wrapper với nền gradient và một lớp phủ bên trong che mọi thứ ngoại trừ vùng viền. Điều này hỗ trợ các góc bo tròn nhưng yêu cầu hai lớp CSS và xử lý cẩn thận padding so với content box. Một cách tiếp cận hiện đại thứ ba sử dụng mask-composite (trình duyệt 2020+) cho một giải pháp đơn phần tử sạch hơn.

      
Viền gradient quan trọng cho các xu hướng thiết kế hiện tại. Bố cục dựa trên thẻ (Stripe, Linear, Vercel, Cursor) sử dụng viền gradient hai màu tinh tế để thêm chiều sâu mà không nặng nề. Các điểm nhấn tính năng cao cấp thường vẽ một viền gradient nhiều màu để biểu thị trạng thái "Pro". Thẩm mỹ cyberpunk và synthwave sử dụng viền gradient neon để gợi lên các rung cảm retro-tương-lai. Các ra mắt sản phẩm AI vào 2023-2024 đã chuẩn hóa trên các viền gradient nhiều màu được hoạt hình hóa như một chữ ký trực quan (OpenAI, Anthropic, Perplexity). Những gì từng yêu cầu các trình chỉnh sửa hình ảnh giờ đây xuất xưởng dưới dạng 5 đến 10 dòng CSS.


      
Cách công cụ này hoạt động bên trong

      
Bản xem trước là một div duy nhất với hai kỹ thuật được áp dụng thông qua CSS nội tuyến, có thể chuyển đổi bằng lựa chọn phương pháp của bạn. Đối với border-image, công cụ đặt border: Npx solid transparent với border-image: linear-gradient(...) 1; giá trị slice 1 cho trình duyệt biết sử dụng gradient ở kích thước đầy đủ cho mỗi cạnh viền. Đối với kỹ thuật pseudo-element, công cụ áp dụng nền gradient cho phần tử bên ngoài và sử dụng ::before (hoặc background-clip: padding-box) để che vùng nội dung bên trong, chỉ để lại vòng viền hiển thị.

      
Các điểm dừng màu được lưu trữ dưới dạng mảng JavaScript của các cặp {color, position}. Khi bạn chọn màu hoặc di chuyển thanh trượt góc, công cụ tái tạo chuỗi linear-gradient() bằng cách nối các điểm dừng với dấu phẩy và đặt góc trước: linear-gradient(45deg, #ff0080 0%, #7928ca 100%). Chuỗi đó được nội suy vào cả CSS xem trước và hộp mã. Thanh trượt góc sử dụng phạm vi 0 đến 360 độ với xoay mũi tên SVG trực quan để phản hồi định hướng.

      
Không có gì rời khỏi trình duyệt của bạn. Việc tạo chuỗi gradient, lưu trữ màu, kết xuất xem trước, và sao chép clipboard đều xảy ra trong JavaScript trên thiết bị của bạn. Không có yêu cầu mạng nào được thực hiện; không có phân tích nào theo dõi những màu bạn chọn. Công cụ không có bất kỳ phần phụ trợ nào ngoài HTML tĩnh và JavaScript được phục vụ một lần khi tải đầu tiên. Làm mới trang và các màu và góc bạn chọn sẽ biến mất trừ khi bạn đã sao chép CSS trước.


      
Lịch sử ngắn gọn về viền và gradient CSS

      

      
Quy trình thực tế

      

      
Các cạm bẫy phổ biến và ý nghĩa của chúng

      

      
Quyền riêng tư: mọi thứ chạy trong trình duyệt của bạn

      
Các công cụ tạo CSS có hai loại: các trang HTML đơn giản chạy JavaScript phía máy khách (riêng tư, nhanh) và các trình chỉnh sửa đám mây lưu các dự án của bạn (cộng tác nhưng với sự đánh đổi quyền riêng tư). Công cụ này là loại đầu tiên. Các màu bạn chọn, góc của bạn, CSS được tạo của bạn: tất cả ở lại trong phiên trình duyệt của bạn. Làm mới trang và trạng thái biến mất trừ khi bạn đã sao chép CSS trước. Không có máy chủ nào lưu trữ các lựa chọn gradient của bạn, không có phân tích nào theo dõi các kết hợp màu nào bạn đã thử, và không cần tài khoản.

      
Thuộc tính quyền riêng tư quan trọng nhất đối với công việc thiết kế độc quyền. Một studio tạo mẫu các kết hợp gradient cho một thiết kế lại thương hiệu bí mật, một nhà phát triển làm việc trên các điểm nhấn UI của một sản phẩm chưa công bố, hoặc một nhà thiết kế lặp lại trên một bảng chiến dịch: bất kỳ ngữ cảnh nào mà lựa chọn màu hoặc lịch sử lặp lại có thể tiết lộ thông tin về công việc. Với công cụ này, không có gì được ghi lại vì không có gì được gửi đi. Mở tab Mạng của trình duyệt và bạn sẽ thấy không có yêu cầu đi ra nào trong khi sử dụng; chỉ có việc tải trang ban đầu tải HTML và JavaScript.


      
Khi một công cụ khác là lựa chọn đúng

      

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

      

        Tôi có thể sử dụng hơn hai màu trong một viền gradient không?
        
Có. CSS linear-gradient() chấp nhận các điểm dừng màu không giới hạn: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) tạo ra một gradient ba màu chuyển tiếp qua màu cam ở giữa. Thêm bao nhiêu điểm dừng bạn muốn, mỗi điểm có một vị trí tùy chọn. Đối với các gradient nhiều màu phức tạp (hiệu ứng cầu vồng), phân phối các điểm dừng đều: 0%, 16.7%, 33.3%, 50%, 66.7%, 83.3%, 100%.

      

      

        Làm thế nào tôi tạo một viền gradient cầu vồng hoặc conic?
        
Đối với các gradient conic (quét), sử dụng conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) làm nền của phần tử bên ngoài với kỹ thuật che padding-box pseudo-element. Đối với hiệu ứng xoay (phổ biến trong các trạng thái tải sản phẩm AI), hoạt hình hóa --angle thông qua CSS Houdini hoặc sử dụng @property --angle với một hoạt hình xoay 360 độ. Kết quả là một quét màu mượt mà quanh viền.

      

      

        Tôi có thể sử dụng các thuộc tính tùy chỉnh CSS cho các viền gradient nhận biết chủ đề không?
        
Có, và đó là cách tiếp cận được khuyến nghị cho các hệ thống thiết kế. Định nghĩa các màu gradient làm các thuộc tính tùy chỉnh CSS (--gradient-start, --gradient-end) và sử dụng chúng trong khai báo gradient của bạn: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end)). Ghi đè các biến trong các truy vấn phương tiện chế độ tối hoặc các lớp chủ đề. Một tệp CSS xử lý cả chủ đề sáng và tối thông qua việc định nghĩa lại biến.

      

      

        Điều này có hoạt động trong các trình duyệt cũ như Internet Explorer không?
        
Internet Explorer 11 (chính thức được Microsoft nghỉ hưu vào tháng 6 năm 2022) có hỗ trợ border-image một phần nhưng kết xuất gradient không đáng tin cậy, và không có mask-composite. Các trình duyệt hiện đại (Chrome 88+, Firefox 78+, Safari 14+) hỗ trợ đầy đủ cả hai kỹ thuật. Nếu bạn phải hỗ trợ IE, cung cấp dự phòng màu rắn sử dụng màu giữa của gradient: khai báo border: 3px solid #888; trước quy tắc gradient, và IE sẽ sử dụng nó trong khi các trình duyệt hiện đại áp dụng gradient.

      

      

        Có một cách thuộc tính đơn lẻ để tạo viền gradient không?
        
Chưa có trong CSS được chuẩn hóa. Các đề xuất hiện đại (bản nháp CSS Backgrounds and Borders Module Level 4) bao gồm thuộc tính border-color chấp nhận trực tiếp các gradient, nhưng các triển khai trình duyệt chưa ổn định. Xấp xỉ gần nhất hiện tại là kỹ thuật mask-composite sử dụng một phần tử duy nhất nhưng vẫn yêu cầu ba khai báo CSS. Hy vọng vào năm 2027 hoặc 2028, border: 3px solid linear-gradient(...) sẽ chỉ hoạt động.

      

      

        Tại sao viền gradient của tôi trông khác trong Safari?
        
Safari trong lịch sử tụt hậu so với Chrome và Firefox về sự ngang bằng tính năng CSS, đặc biệt cho các giá trị mask-composite và một số trường hợp biên background-clip. Kiểm tra rõ ràng trong Safari. Nếu kỹ thuật pseudo-element thất bại trong Safari, chuyển sang border-image (hoạt động toàn cầu nhưng mất border-radius), hoặc sử dụng các tiền tố cụ thể Safari: -webkit-mask-composite có thể được yêu cầu cho các phiên bản Safari cũ hơn. iOS Safari thường cần tiền tố ngay cả trong các phiên bản 2024.

      

    


    
    

      
Công cụ liên quan

      

        Trình tạo gradient CSS
        Trình tạo hoạt ảnh CSS
        Trình tạo CSS Border Radius
        Trình Tạo Gradient Văn Bản CSS