Trình tạo mẫu CSS

Tạo các mẫu nền CSS từ các gradient thuần. Chọn một mẫu, tùy chỉnh, sao chép.

20px
100%

Mã CSS

Các mẫu nền CSS

Một họa tiết nền CSS là ảnh được carrelage, sọc, chấm, lưới, ô vuông, tam giác, hoàn toàn vẽ bằng các hàm gradient CSS và không có tệp ảnh. Ba thuộc tính làm tất cả công việc: background-image vẽ bất kỳ ảnh gradient nào trong phần tử, background-size định kích cỡ một ô tile của ảnh đó, và background-repeat (mặc định là repeat) lát ảnh đó theo cả hai trục. background-position sau đó dịch đường khâu để tile của mỗi lớp khớp với các lớp khác. Vậy một họa tiết chỉ là nhiều ảnh gradient xếp chồng lên nhau, mỗi cái đặt cùng kích cỡ tile, mỗi cái đặt vị trí để khớp. Trình duyệt vẽ các giá trị background-image ngăn cách bằng dấu phẩy từ trước ra sau, nên ảnh đầu tiên trong danh sách nằm trên ảnh thứ hai, ảnh thứ hai trên ảnh thứ ba, và cứ thế.

Cả thể loại tồn tại nhờ một mẹo cú pháp: color stop cứng. Các color stop liền kề ở cùng vị trí tạo chuyển đổi tức thì thay vì nhòe. linear-gradient(red 50%, blue 50%) không phải nhòe từ đỏ sang xanh, đó là một đường sắc nét. Không có color stop cứng bạn được gradient mượt; có chúng bạn được hình học. Sọc, chấm, ô vuông, tam giác, chevron, mỗi họa tiết công cụ này phát ra đều dựng từ tính chất duy nhất đó, áp dụng ở góc và kích cỡ tile khác nhau.

Lược sử ngắn, Lea Verou và thư viện họa tiết

Nếu một nguồn duy nhất chịu trách nhiệm cho cả thể loại họa tiết nền CSS thuần, đó là CSS3 Patterns Gallery của Lea Verou, ban đầu host tại lea.verou.me/css3patterns/. Verou đã công bố các demo riêng lẻ suốt năm 2010 và đầu 2011, gồm một demo ô vuông nổi tiếng tháng 2 năm 2011, trước khi công bố thư viện chính ngày 15 tháng 4 năm 2011 trong bài viết "CSS3 patterns gallery and a new pattern" (họa tiết mới là thiết kế khối Nhật Bản mà cô gọi là khó nhất từng làm). Vài tháng sau, ngày 1 tháng 12 năm 2011, cô viết bài luận kinh điển "CSS3 Patterns, Explained" cho Advent Calendar 24 ways, vẫn là cách giải thích bằng tiếng Anh rõ ràng nhất về kỹ thuật color stop cứng làm nền cho mọi sọc, chấm và ô vuông. Tháng 6 năm 2015, O'Reilly xuất bản cuốn CSS Secrets: Better Solutions to Everyday Web Design Problems, mở rộng chương về họa tiết thành một phân loại hoàn chỉnh. Tác động văn hóa rộng hơn của thư viện được ghi trong ghi chú dự án của Verou: nó "khởi xướng thực hành rộng rãi sử dụng color stop cứng trong gradient CSS để dễ tạo họa tiết nền và đồ họa khác" và sau đó được kỹ sư Opera Software dùng để tinh chỉnh triển khai gradient của họ.

Từ tiền tố vendor đến đặc tả

Gradient CSS được định nghĩa trong CSS Image Values and Replaced Content Module Level 3 (thường gọi "CSS Images 3"), do W3C CSS Working Group bảo trì và Tab Atkins Jr. cùng Elika J. Etemad cùng các người khác biên tập. First Public Working Draft ngày 12 tháng 7 năm 2011; đặc tả đạt Candidate Recommendation tháng 4 năm 2012, khóa cú pháp hiện đại không tiền tố, gồm quy ước rằng 0deg chỉ lên trên và to right tương đương 90deg. Thứ tự ra mắt ở các trình duyệt: WebKit là người đầu tiên xa, với -webkit-gradient() dùng được trong Safari 4 (2009); Firefox giao -moz-linear-gradient() trong Firefox 3.6 (21 tháng 1 năm 2010); Internet Explorer 10 giao dạng không tiền tố năm 2012; cú pháp không tiền tố ổn định qua mọi engine chính cuối 2013. conic-gradient() được đặc tả trong CSS Images Level 4 vì Level 3 đã vào Last Call khi cú pháp đang được thiết kế; nó được giao trong Chrome 69 (4 tháng 9 năm 2018), Safari 12.1 (25 tháng 3 năm 2019) và Firefox 83 (17 tháng 11 năm 2020). Năm 2026 bạn có thể viết background: linear-gradient(...) và background: conic-gradient(...) tự tin không tiền tố hay fallback cho bất kỳ trình duyệt nào đáng được hỗ trợ.

linear-gradient: góc và phía

Cú pháp chính thức là linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). Quy ước góc thường làm lập trình viên vấp vì nó khác quy ước SVG/canvas. 0deg tương đương to top (đường gradient chỉ lên trên, nên màu cuối hiện ở đỉnh hộp). 90deg tương đương to right. 180deg tương đương to bottom (mặc định nếu không cho hướng). 270deg tương đương to left. Góc tăng dần xoay theo chiều kim đồng hồ từ đỉnh, ngược quy ước toán học (nơi 0 ở phải và góc tăng ngược chiều kim đồng hồ) và ngược <linearGradient> của SVG. Một tinh tế hữu ích: to right và 90deg chỉ tương đương trên hộp vuông. Trên hộp không vuông, to top right tạo đường gradient vuông góc chính xác với đường chéo từ góc dưới-trái, nghĩa là gradient đến góc gọn gàng, trong khi 45deg luôn là 45 độ chữ, bất kể tỉ lệ cạnh. Điều đó quan trọng ít hơn cho họa tiết carrelage (nơi tile thường vuông) nhưng nhiều cho hero background.

radial-gradient: hình, kích cỡ và chấm

Cú pháp là radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Hai giá trị hình là circle và ellipse (mặc định ellipse). Kích cỡ có thể là một trong bốn từ khóa độ rộng, closest-side, closest-corner, farthest-side hoặc farthest-corner (mặc định), hoặc độ dài/phần trăm rõ ràng. Cho họa tiết chấm, công thức kinh điển là radial-gradient(circle at center, #000 0 5px, transparent 5px) với background-size: 20px 20px, một hình tròn đen 5 px ở giữa mỗi tile 20 px, phần còn lại trong suốt. Chấm có thể được dịch với lớp thứ hai ở nửa-tile để tạo lưới chấm hình lục giác. Cho sọc thuần bạn không cần định kích cỡ tile thủ công: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) tạo sọc chéo đen-trắng rộng 10 px, lặp trên cả hộp, không cần khai báo background-size. Gradient lặp cũng có đối tác radial và conic, repeating-radial-gradient tạo vòng đồng tâm, repeating-conic-gradient tạo cối xay gió.

conic-gradient: bánh và mặt trời mà bạn không thể dựng trước đây

conic-gradient() xoay color stop quanh tâm thay vì dọc đường thẳng hay từ tâm. Color stop được đặt theo góc, không phải độ dài. Lịch sử tri thức là một trong các câu chuyện CSS thú vị nhất: Lea Verou đã viết đề xuất conical-gradient() sớm tận năm 2011, trước khi bất kỳ trình duyệt nào hỗ trợ, và Tab Atkins Jr. ghi nhận bản nháp của cô khi chính thức thêm hàm này vào CSS Image Values Level 4. Triển khai kéo dài nhiều năm. Tháng 6 năm 2015, Verou viết một polyfill, dùng SVG và thư viện -prefix-free, và trình bày trên sân khấu CSSConf, đặt tựa bài "Conical gradients, today!" Đến gốc native xảy ra trong Chrome 69 (4 tháng 9 năm 2018), Safari 12.1 (25 tháng 3 năm 2019), và Firefox 83 (17 tháng 11 năm 2020). Conic gradient mở khóa điều mà linear và radial không thể: biểu đồ bánh và donut không cần canvas, SVG hay JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) cộng border-radius: 50% là biểu đồ bánh hoàn chỉnh); bánh xe màu (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) tạo bánh xe sắc độ chuẩn); họa tiết tia và sao từ các màu xen kẽ ở color stop cứng tại các khoảng góc nhỏ; khung gradient và phản chiếu góc; và ô vuông trong một khai báo (repeating-conic-gradient(#000 0 25%, #fff 0 50%) cộng background-size tạo ô vuông với một lớp gradient thay vì hai gradient tuyến tính chồng).

Hiệu năng: khi nào họa tiết CSS thắng ảnh, và khi nào không

Lập luận hiệu năng cho họa tiết CSS thuần là điều đáng hiểu kỹ vì nó bị đơn giản hóa quá mức trong tài liệu marketing. Lợi của CSS thuần: không request HTTP, không giải mã, không phí PNG/JPEG/WebP, một quy tắc CSS 4 dòng thay tệp nhị phân; độc lập độ phân giải vector, một họa tiết trông giống nhau ở 1×, 2×, 3× tỉ lệ pixel thiết bị mà không cần gửi asset @2x và @3x, đây là lý do lớn nhất design system thích họa tiết gradient hơn PNG cho màn hình retina; đổi màu dễ, đổi một biến CSS cập nhật cả họa tiết; có thể animate qua background-position hoặc, với @property, qua color stop animate được. Chi phí cần biết: chi phí vẽ tỉ lệ với pixel chạm và độ phức tạp gradient, gradient nằm trong số các thao tác vẽ đắt nhất bên cạnh box-shadow lớn, SVG phức tạp và hiệu ứng văn bản nặng, và xếp nhiều lớp gradient trên hero toàn-cửa-sổ có thể tốn frame trên GPU thấp. Animate màu của gradient kích hoạt repaint đầy đủ ở mỗi frame (điều này thay đổi với thuộc tính tùy biến đăng ký qua @property trong Chromium và Firefox, nhưng vẫn an toàn hơn khi animate background-position). Heuristic thực tế: nếu bạn có một họa tiết duy nhất toàn-cửa-sổ và bạn không animate nó, bạn không nhận ra gì. Nếu bạn xếp năm lớp gradient trên mỗi card trong danh sách dài, hãy profile.

Trợ năng: tương phản, trang trí và chuyển động giảm

Họa tiết nền CSS, theo định nghĩa, là trang trí. Chúng không xuất hiện trong cây tài liệu hay cây trợ năng; từ góc nhìn của công nghệ hỗ trợ, chúng đơn giản không tồn tại. Phần lớn đó là tính năng, hướng dẫn WAI của W3C về ảnh trang trí nói rõ rằng hình ảnh trang trí "nên được cung cấp dùng ảnh nền CSS thay vì" <img> để chúng được trình đọc màn hình bỏ qua tự nhiên. Nhưng tương phản vẫn áp dụng cho mọi thứ bạn đặt trên họa tiết. Tiêu chí thành công WCAG 2.1 1.4.3 đòi tỉ lệ tương phản 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn. Họa tiết làm điều đó khó hơn vì độ sáng cục bộ của nền thay đổi theo từng pixel. Kỹ thuật WCAG G18 xử lý điều này trực tiếp: nếu nền là họa tiết, nền quanh chữ có thể được chọn hoặc tô bóng để chữ giữ tỉ lệ tương phản 4,5:1 với nền sau chúng, dù chúng không có tỉ lệ đó với toàn nền. Trên thực tế: nếu bạn đặt văn bản trên họa tiết, hoặc chọn màu họa tiết có độ sáng tương tự nhau (để tương phản với văn bản nhất quán trên cả tile), hoặc đặt một thẻ màu đặc giữa văn bản và họa tiết. Đặt văn bản trực tiếp trên họa tiết tương phản cao (ví dụ sọc đen-trắng) là trường hợp cả công cụ kiểm tra tương phản và người đọc đều vất vả. WCAG 2.1 cũng đòi tương phản 3:1 cho thành phần UI phi văn bản và đồ họa, có thể áp dụng cho icon và separator dựa trên họa tiết. Nếu họa tiết của bạn được animate, một sọc cuộn, một conic xoay chậm, một skeleton lung linh, hãy bọc animation trong @media (prefers-reduced-motion: no-preference). Động cơ là y học, không phải phong cách: animation có thể kích hoạt triệu chứng tiền đình (buồn nôn, chóng mặt), co giật ở người dùng động kinh quang nhạy, và đau nửa đầu.

Họa tiết SVG vs gradient CSS: so sánh công bằng

Phần tử <pattern> của SVG là anh em tinh thần của gradient CSS. Cả hai cho phép bạn lát một ô đơn vị trên vùng tô. Chúng có điểm mạnh khác nhau. Họa tiết SVG thắng khi đơn vị là hình phức tạp (lá cây, vảy cá, lục giác bất quy tắc) mà gradient không thể diễn đạt tự nhiên; khi bạn muốn giao một asset do designer tạo (Hero Patterns của Steve Schoger, ra mắt ngày 27 tháng 9 năm 2016 dưới CC BY 4.0, là thư viện kinh điển của họa tiết SVG); khi bạn cần hình học vector chính xác cho đường cong sắc nét mà color stop cứng của gradient chỉ có thể xấp xỉ; hoặc khi bạn muốn dùng lại họa tiết trên nhiều phần tử SVG qua fill="url(#myPattern)". Gradient CSS thắng khi họa tiết là hình học, sọc, chấm, lưới, ô vuông, chevron, tam giác, bất cứ gì có thể dựng từ đường thẳng và hình tròn; khi bạn muốn không phí HTTP; khi bạn cần tùy biến theo từng instance qua biến CSS (--stripe-color: red cập nhật họa tiết tức thì); khi bạn muốn áp họa tiết làm nền CSS lên bất kỳ phần tử HTML, không chỉ trong SVG; hoặc khi bạn muốn animate họa tiết không có phần tử <animate>. Một kỹ thuật hỗn hợp phổ biến là inline SVG dưới dạng URL data:image/svg+xml,... trong background-image, điều đó cho lợi "không request HTTP thêm" của CSS thuần trong khi cho phép designer diễn đạt hình tùy ý. Mặt trái là độ phức tạp mã hóa: # trở thành %23, dấu nháy đôi phải được escape, và soi SVG trong DevTools bất tiện. Trình tạo này phát ra họa tiết gradient CSS thuần; đánh đổi có chủ ý, đơn giản và payload nhỏ thay vì linh hoạt hình tối đa.

Nơi họa tiết CSS kiếm cơm

Thể loại rộng hơn giấy dán tường. Cách dùng thực tế trong production gồm:

Cách sử dụng

  1. Chọn một loại mẫu: chọn các sọc, dấu chấm, ô vuông cờ vua, lưới, zigzag, tam giác và nhiều hơn nữa, tất cả bằng CSS thuần.
  2. Tùy chỉnh màu sắc và tỷ lệ: điều chỉnh màu tiền cảnh và nền, kích thước mẫu, góc và khoảng cách với các thanh trượt.
  3. Xem trước trực tiếp: mẫu hiển thị theo thời gian thực trong khi bạn sửa đổi cài đặt.
  4. Sao chép CSS: sao chép thuộc tính background được tạo và dán vào stylesheet của bạn.

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

CSS có hoạt động trong trình duyệt cũ hơn không?

Mọi trình duyệt hiện đại lớn giao linear-gradient, radial-gradient và biến thể lặp không tiền tố và bật mặc định, dọn dẹp hoàn tất cuối 2013. conic-gradient mất nhiều thời gian hơn (Chrome 69 tháng 9 năm 2018, Safari 12.1 tháng 3 năm 2019, Firefox 83 tháng 11 năm 2020) nhưng cũng phổ quát năm 2026. Trình tạo không phát tiền tố vendor vì không cần cho trình duyệt nào đáng được hỗ trợ. Microsoft Edge bỏ engine EdgeHTML tháng 1 năm 2020 và IE11 đến cuối đời ngày 15 tháng 6 năm 2022; cả hai giờ là chú thích lịch sử cho mọi công cụ mới.

Họa tiết CSS có nhanh hơn nền ảnh carrelage không?

Cho họa tiết tĩnh, có, một họa tiết CSS loại bỏ một request HTTP, một lượt giải mã, và việc gửi asset đa độ phân giải cần cho màn hình retina. Họa tiết cũng vector hoàn hảo ở mọi mức zoom và đổi màu dễ qua biến CSS. Đánh đổi là chi phí vẽ: gradient nằm trong số những thứ đắt nhất một trình duyệt có thể vẽ, và xếp nhiều lớp gradient trên hero toàn-cửa-sổ có thể tốn frame trên GPU thấp. Cho một họa tiết tĩnh duy nhất trên card hay section, bạn không nhận ra gì. Nếu bạn xếp năm lớp gradient trên mỗi mục trong danh sách dài, hãy profile trước khi giao.

Đặt văn bản trên họa tiết một cách trợ năng thế nào?

WCAG 2.1 SC 1.4.3 đòi tương phản 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn so với nền. Với nền họa tiết, độ sáng cục bộ thay đổi theo từng pixel, có thể làm tương phản thất bại ở trường hợp xấu nhất dù tương phản trung bình trông ổn. Hai chiến lược an toàn: chọn màu họa tiết có độ sáng tương tự nhau (để tương phản với văn bản nhất quán trên cả tile), hoặc đặt thẻ màu đặc giữa văn bản và họa tiết. Đặt văn bản trực tiếp trên họa tiết tương phản cao (ví dụ sọc đen-trắng) là trường hợp cả công cụ kiểm tra tương phản và người đọc đều vất vả.

Tôi có thể animate họa tiết không?

Có. Animation rẻ nhất là dịch background-position với @keyframes, điều này kích hoạt cập nhật chỉ-compositor trên phần lớn trình duyệt và có thể chạy mượt 60 fps. Animate màu của gradient đắt hơn vì mỗi frame kích hoạt vẽ đầy đủ; Chromium và Firefox hiện đại có thể giảm nhẹ điều này với thuộc tính tùy biến đăng ký qua @property, nhưng background-position là mặc định an toàn hơn. Luôn bọc animation trong @media (prefers-reduced-motion: no-preference), nền animate có thể kích hoạt triệu chứng tiền đình, co giật và đau nửa đầu cho người dùng nhạy cảm.

Vì sao họa tiết của tôi trông mờ trên màn hình retina?

Không nên, đó là toàn bộ điểm của việc dùng gradient thay vì ảnh bitmap. Nếu của bạn mờ, hãy kiểm tra rằng color stop ở phần trăm chính xác (color stop cứng là hai stop ở cùng vị trí; chênh nhỏ kể cả 50% 50.1% đưa vào dải mờ thấy được) và rằng kích cỡ tile dùng px chứ không em hay %, có thể tương tác bất ngờ với việc co giãn văn bản. Conic gradient trên các phiên bản Safari cũ hơn từng render tâm như vùng hơi mờ; Safari và Chrome hiện đại đều rasterize trên GPU và vấn đề phần lớn đã biến mất.

Dữ liệu của tôi có được gửi đi đâu không?

Không. Việc chọn họa tiết, chọn màu, định kích cỡ và sinh CSS đều chạy trong trình duyệt. Không có request đi ra khi bạn dùng các điều khiển, bạn có thể kiểm chứng trong tab Network của DevTools. CSS sinh ra là của bạn, dán bất cứ nơi nào bạn muốn.

Công cụ liên quan

Trình tạo gradient CSS

Tạo gradient CSS một cách trực quan.

Trình tạo Glassmorphism

Tạo các hiệu ứng kính mờ.

Trình tạo box-shadow

Trình chỉnh sửa trực quan box-shadow.