digtools
🖼️
css filter & blend generator,

Trình Tạo CSS
Filter & Blend

Kết hợp filter và blend trực quan, tạo code tức thì và xuất ảnh cực xịn.

🔒️
100% Client-side
Ảnh không bao giờ bị đẩy lên máy chủ
✨️
Sẵn sàng cho Tailwind
Tự động tạo class tiện ích
⚡️
Xuất Ảnh
Tải kết quả xuống dưới dạng PNG

Mẫu có sẵn

* Bạn có thể nắm biểu tượng [≡] để kéo thả đổi thứ tự các bộ lọc.

Xem trước

8px
Preview Image
Backdrop Target

Mã CSS

Tailwind CSS

 
 
 
  
Bạn cũng có thể thích
✨
Trình tạo CSS View Transition
🎨
Trình chuyển đổi màu sắc
🎨
Bảng chọn màu từ hình ảnh
 
  
   
 
 about, 
  Về Trình Tạo CSS Filter & Blend 
 
  
CSS Filter & Blend Generator là công cụ dành cho các nhà phát triển web cho phép bạn thử nghiệm trực quan với các thuộc tính mạnh mẽ dùng để xử lý hình ảnh của CSS: filter, backdrop-filter, và mix-blend-mode, sau đó công cụ tự động chuyển ra code giúp bạn. Nó mô phỏng lại các hiệu ứng phức tạp mà trước nay ta thường làm trong app chỉnh sửa ảnh, làm tất cả trực tiếp trên trình duyệt của bạn và sẵn sàng ném vào trang web.
 
Bạn có thể tái tạo độ tương phản, điều chỉnh độ sáng, làm mờ (blur), thay đổi sắc thái (sepia tone), hay cả hòa trộn layer (multiply, screen) không khác gì xài Photoshop, tất cả chỉ bằng CSS. Bạn cũng có thể tha hồ kéo thả để đảo lộn các bộ lọc với nhau và nhìn chúng thay đổi. Công cụ cũng hỗ trợ xuất sẵn CSS kiểu Tailwind cho những ai xài Framework đó. Tuyệt vời hơn nữa là khung ảnh kết quả cuối cùng có thể tải xuống lưu ở máy như một file PNG chất lượng cao.
  
 
 
  
 
 how to, 
  Cách sử dụng công cụ này 
 
  
 
 BƯỚC 1 
Chuẩn bị hình mẫu xem trước
 
Sử dụng nút "Đổi Ảnh" để đưa hình ảnh từ thiết bị của bạn lên màn hình Preview. Xin yên tâm vì ảnh của bạn không hề được tải lên máy chủ nào cả nên cực kỳ riêng tư. Ở bước này bạn cũng có thể cài đặt tỉ lệ khung hình nếu thích.
 
 
 BƯỚC 2 
Thêm thắt và đảo bộ lọc
 
Lựa chọn các loại bộ lọc (vd: Blur - làm mờ, Contrast - tương phản) rồi ấn "Thêm". Sau đó sử dụng thanh trượt để tinh chỉnh cường độ. Ngoài ra bạn còn có thể nhấn vào biểu tượng 3 gạch ngang bên trái mỗi lớp lọc để kéo lên kéo xuống sắp xếp lại thứ tự cho chuẩn.
 
 
 BƯỚC 3 
Copy code và Tải ảnh
 
Bên tay phải màn hình là đoạn code vừa được sinh ra (bạn có thể nhấn chọn kiểu CSS thuần hay Tailwind CSS). Copy là xong. Còn nếu ưng mắt quá thì bạn chỉ cần nhấn nút "Lưu Ảnh", một bức ảnh Canvas chất lượng sẽ được tải thẳng xuống thiết bị.
 
 
  
 
 
  
 
 glossary, 
  Từ Điển Thuật Ngữ CSS Filter 
 
  
 
 
filter
 
Một thuộc tính CSS áp dụng các thay đổi thị giác cho một thẻ (thường là một bức ảnh). Nó có các hàm như blur(), brightness(), color(). Các hàm này viết cách nhau bằng dấu khoảng trắng, và chúng được xử lý tuần tự từ trái sang phải.
 
 
 
backdrop-filter
 
Chuyên gia đứng sau những tấm "kính mờ" xịn xò. Nó áp dụng bộ lọc vào vùng "đằng sau" của một thẻ. Dĩ nhiên là bản thân cái thẻ phía trước phải hơi trong suốt (bán trong suốt) một chút thì bạn mới thấy được màn trình diễn này. Được ví như hiệu ứng "Glassmorphism" hiện đại.
 
 
 
mix-blend-mode
 
Thuộc tính sinh ra để chỉ định cách một phần tử sẽ "hòa trộn" màu sắc với nội dung đằng sau nó. Khá giống với cách mà Photoshop hòa trộn các Layer, bạn có thể chọn multiply, screen, overlay... cho phép tạo ra các mảng màu tinh vi và nghệ thuật.
 
 
 
Tailwind CSS
 
Một framework CSS tập trung vào class tiện ích siêu nổi tiếng hiện nay. Công cụ này của chúng tôi hiểu được các biến đổi phức tạp mà bạn làm để gói gọn chúng lại thành các class như backdrop-blur-md hoặc mix-blend-multiply.
 
 
  
 
 
  
 
 faq, 
  Hỏi Đáp Thường Gặp 
 
  
 
 
Q.Hình ảnh tải lên có bị lưu vào máy chủ không?
 
Không, tính năng tải lên chỉ dùng để hiển thị trên trình duyệt của bạn (môi trường cục bộ) và dữ liệu ảnh không bao giờ bị gửi đến bất kỳ máy chủ bên ngoài nào. Nó hoạt động hoàn toàn an toàn và gần như ngoại tuyến.
 
 
Q.Sự khác biệt giữa filter và backdrop-filter là gì?
 
Thuộc tính `filter` áp dụng hiệu ứng trực tiếp lên một phần tử (như thẻ img). Ngược lại, `backdrop-filter` áp dụng hiệu ứng lên nội dung 'phía sau' phần tử đó. Với các giao diện UI cần làm mờ nền và đặt văn bản lên trước, người ta dùng `backdrop-filter`.
 
 
Q.Tại sao hiệu ứng không thay đổi khi tôi đảo thứ tự bộ lọc?
 
Với một số kết hợp nhất định, như 'Contrast' (Tương phản) và 'Brightness' (Độ sáng), có thể sẽ thấy rất ít sự khác biệt về mặt thị giác tùy thuộc vào thứ tự của chúng. Tuy nhiên, nếu bạn dùng 'Blur' (Làm mờ) rồi mới 'Contrast', bạn sẽ thấy rõ sự khác biệt (thường làm viền sắc nét hơn).
 
 
Q.Lưu ảnh kết quả bị lỗi.
 
Nếu bạn tải hình ảnh từ một URL bên ngoài, chính sách bảo mật CORS (Cross-Origin Resource Sharing) của trình duyệt có thể chặn việc xuất hình ảnh vào Canvas. Vui lòng thử tải ảnh trực tiếp từ máy tính/điện thoại qua nút 'Đổi Ảnh' rồi thử lại.
 
 
  
 
 
  
 
 use cases, 
  Ứng Dụng Thực Tế 
 
  
 
 🔍 
Tạo UI với hiệu ứng Kính (Glassmorphism)
 
Chỉ cần chuyển nền một chiếc cửa sổ Modal hay thanh Header thành dạng trong suốt (semi-transparent), rồi kết hợp với backdrop-filter để làm mờ nó. Bạn đã có ngay giao diện sang chảnh mang hơi hướng thẻ Card UI của iOS hoặc macOS.
 
 
 🌅 
Điều chỉnh lại ảnh nền Hero Header
 
Khi muốn để chữ to nổi bần bật phía trên một tấm hình nền, hãy giảm Brightness đi một chút và vặn nhẹ Blur cho ảnh nền ấy, thế là xong. Chữ được tôn lên rõ ràng mà mỹ quan vẫn đẹp.
 
 
 🖱️ 
Làm các tương tác Hover vi diệu
 
Rất thích hợp cho các thành phần chuyển động. Ví dụ, thiết lập một bức ảnh ban đầu ở dạng ảnh đen trắng xám xịt (grayscale), rồi trả lại đúng tông màu rực rỡ và bóng đổ mỗi khi người dùng di chuột tới.
 
 
 🎨 
Giảm chói ảnh trong Dark Mode
 
Sử dụng kèm media queries của CSS để bắt xem hệ điều hành của người dùng có đang ở giao diện tối (Dark mode) không. Nếu có, hãy làm tối hình ảnh đi một xíu, hoặc nhét thêm cái tông sepia trầm tính vào để không bị chói mắt về đêm.
 
 
  
 
 
  
 
 technology, 
  Chi tiết Kỹ thuật 
 
  
 
Tầm quan trọng của Thứ tự bộ lọc
 
Cú twist lớn nhất trong CSS filter đó là "Thứ tự áp dụng". Đừng coi thường nó. Lấy ví dụ: filter: saturate(200%) blur(5px); và filter: blur(5px) saturate(200%); sẽ hiển thị hoàn toàn khác nhau. Cái trước nâng độ đậm màu rực rỡ lên xong mới đem tất cả đi làm nhòe. Cái sau thì đi làm nhòe ảnh trước, rồi lại nâng độ rực rỡ của những mảng màu đang bị nhòe kia lên.
 
Bằng cách kéo thả trực tiếp trên công cụ này của chúng tôi, bạn có thể nhanh chóng bắt đúng độ thẩm mỹ ưng ý.
 
 
 
Tăng tốc phần cứng và Kỹ thuật Export với Canvas
 
Những hiệu ứng CSS filter này có khả năng "trưng dụng" GPU (tăng tốc phần cứng) của thiết bị để xử lý siêu tốc. Trải nghiệm trên trình duyệt luôn mượt mà hơn hẳn so với việc tạo ảnh bằng Server rồi trả kết quả về.
 
Thêm nữa, tính năng "Lưu Ảnh" tận dụng hàm API globalCompositeOperation của Canvas 2D để sao chép nguyên mẫu từng điểm ảnh như cách trình duyệt render CSS vậy, cho ra lò sản phẩm hình ảnh có chất lượng miễn bàn.
 
  
 
 
 
 
 
 
  Công cụ liên quan 
  Trình tạo CSSXem tất cả   
 
   
 ✨ 
 
 
 Trình tạo CSS View Transition 
 
 Tạo hiệu ứng chuyển cảnh trang web bằng CSS View Transitions API. 
 
 
  
   
 🎨 
 
 
 Trình chuyển đổi màu sắc 
 
 Chuyển đổi các định dạng màu (HEX, RGB, HSL, CMYK) qua lại dễ dàng. 
 
 
  
   
 🎨 
 
 
 Bảng chọn màu từ hình ảnh 
 
 Trích xuất mã màu trực tiếp từ bất kỳ vị trí nào trên hình ảnh tải lên. 
 
 
  
   
 ↔️ 
 
 
 Trình tạo CSS Clamp 
 
 Tạo hàm clamp() trong CSS để thiết kế kiểu chữ và khoảng cách responsive. 
 
 
  
   
 ✂️ 
 
 
 Trình tạo CSS clip-path 
 
 Tạo hình dạng cắt clip-path trực quan cho các phần tử web bằng CSS. 
 
 
  
   
 📦 
 
 
 Trình tạo CSS Container Query 
 
 Tạo các truy vấn vùng chứa (Container Queries) thông minh cho CSS hiện đại. 
 
 
  
   
 🎨 
 
 
 Trình tạo dải màu CSS Gradient 
 
 Thiết kế và tùy chỉnh các dải màu (Gradient) bằng CSS dễ dàng. 
 
 
  
   
 📐 
 
 
 Trình tạo bố cục CSS 
 
 Tạo mã CSS cho các bố cục Flexbox hoặc CSS Grid linh hoạt. 
 
 
  
   
 ☁️ 
 
 
 Trình tạo đổ bóng CSS (Box-Shadow) 
 
 Tạo hiệu ứng đổ bóng cho các phần tử web bằng thuộc tính Box-Shadow. 
 
 
  
  
 
 
 
  Tất cả danh mục 
 
  Công cụ Web & Nhà phát triển  Trình tạo CSS  Công cụ Hình ảnh & Ảnh  Công cụ Video & Âm thanh  SEO & Tiếp thị  Công cụ Mạng & Hệ thống  Công cụ Văn bản & Viết  Công cụ Tài chính & Lương  Công cụ Ngày & Lịch  Công cụ Tài liệu & Doanh nghiệp  Trò chơi & Sự kiện  Đời sống & Sức khỏe   Trang chủ  
 
 
 
   
 
 
  Gửi phản hồi 
 
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
 
       
   
 
     
 
 
  
  
 
  
 
 
    
  
   
 
 
 
  Tuyên bố miễn trách nhiệm 
 
 Các công cụ được cung cấp trên trang web này hoàn toàn miễn phí, nhưng vui lòng sử dụng theo rủi ro của riêng bạn. Chúng tôi không đảm bảo về độ chính xác, đầy đủ hoặc an toàn của bất kỳ kết quả tính toán, kết quả chuyển đổi hoặc dữ liệu được tạo ra nào. Xin lưu ý rằng người vận hành không chịu trách nhiệm về bất kỳ thiệt hại hoặc sự cố nào gây ra bởi việc sử dụng các công cụ này. Hầu hết các công cụ xử lý tệp và tính toán ngay trong trình duyệt của bạn, nghĩa là dữ liệu bạn nhập không được gửi hoặc lưu trữ trên máy chủ của chúng tôi.