✨

modern ui css,

Công cụ tạo CSS Glassmorphism

Tạo hiệu ứng Glassmorphism (kính mờ) tuyệt đẹp cho web bằng CSS. Tùy chỉnh độ mờ, độ trong suốt, đổ bóng và viền bằng các thanh trượt trực quan. Xem trước kết quả theo thời gian thực và sao chép mã CSS để sử dụng ngay trong dự án của bạn.

🎛

Trực quan

Điều chỉnh dễ dàng

👁

Thời gian thực

Xem trước ngay

📋

Sẵn sàng

Sao chép CSS ngay

auto_awesome Cài đặt trước (12 loại) → Cuộn ngang

tune Trình chỉnh sửa

Màu nền / Độ trong 0.20

💎

Glassmorphism

Công cụ tạo CSS Modern UI

code Mã được tạo

about,

Tổng quan

Glassmorphism là xu hướng thiết kế UI tạo ra kết cấu giống như kính mờ bằng cách làm cho nền trong suốt và áp dụng hiệu ứng mờ (backdrop-filter: blur()). Phong cách này được sử dụng rộng rãi trong macOS/iOS của Apple và hệ thống Fluent Design của Windows.

Công cụ này cung cấp 12 preset có thể áp dụng bằng một cú nhấp chuột, cũng như điều chỉnh độc lập 4 hàm của backdrop-filter: blur, brightness, saturate và contrast. Bạn cũng có thể tinh chỉnh viền, bóng, bo góc bằng thanh trượt và sao chép mã dưới dạng CSS hoặc biến CSS.

howto,

Cách sử dụng

BƯỚC 1

Chọn preset hoặc chỉnh sửa

Nhấp vào phong cách yêu thích của bạn từ thư viện ở trên. Nếu muốn tạo từ đầu, hãy sử dụng thanh trượt để điều chỉnh từng thuộc tính.

BƯỚC 2

Xem trước thời gian thực

Kiểm tra hiệu ứng trong khu vực xem trước. Nút chuyển đổi nền cho phép bạn thử 6 mẫu nền khác nhau.

BƯỚC 3

Sao chép mã

Chọn định dạng mong muốn từ CSS hoặc biến CSS, nhấp vào nút 📋 để sao chép. Dán trực tiếp vào dự án của bạn để sử dụng.

property,

Thuật ngữ

backdrop-filter: blur(): Làm mờ phía sau phần tử. Giá trị càng lớn, hiệu ứng kính mờ càng mạnh. Đây là thuộc tính cốt lõi của Glassmorphism.
backdrop-filter: brightness(): Điều chỉnh độ sáng của nền. Mặc định là 100%. Sáng gấp đôi ở 200% và tối đen ở 0%.
backdrop-filter: saturate(): Điều chỉnh độ bão hòa màu của nền. Mặc định là 100%. Đơn sắc ở 0% và màu quá bão hòa ở 200%.
backdrop-filter: contrast(): Điều chỉnh độ tương phản của nền. Mặc định là 100%. Tăng giá trị sẽ làm nổi bật sự khác biệt giữa sáng và tối.
Vendor Prefix: Nên viết thêm -webkit-backdrop-filter để hỗ trợ Safari. Mã được tạo bởi công cụ này sẽ tự động bao gồm điều đó.

faq,

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

Q.backdrop-filter có hoạt động trên mọi trình duyệt không?: Thuộc tính này được hỗ trợ trên các phiên bản mới nhất của Chrome, Edge, Safari và Firefox. IE11 không được hỗ trợ, nhưng bạn nên thiết kế dự phòng bằng màu nền bán trong suốt để duy trì giao diện tối thiểu.
Q.Sự khác biệt giữa Neumorphism và Glassmorphism là gì?: Glassmorphism sử dụng backdrop-filter để tạo hiệu ứng 'kính mờ' và thể hiện sự chồng chéo của các phần tử (trục Z). Neumorphism là phong cách sử dụng ánh sáng và bóng tối của box-shadow để thể hiện sự 'lồi lõm'.
Q.Nó có ảnh hưởng đến hiệu suất không?: backdrop-filter sử dụng tổng hợp GPU, vì vậy nó không thành vấn đề nếu được sử dụng vừa phải. Tuy nhiên, việc áp dụng giá trị blur (độ mờ) cao cho toàn bộ trang có thể làm giảm tốc độ khung hình.
Q.Tôi có thể sử dụng nguyên bản mã được tạo không?: Có. Bạn có thể áp dụng nó bằng cách sao chép mã CSS và dán vào stylesheet của bạn. Hãy thoải mái thay đổi tên lớp theo ý muốn.

scenes,

Trường hợp sử dụng

🗂

Thanh Điều Hướng (Navbar)

Tạo thanh điều hướng bán trong suốt, khi cuộn trang phần nền sẽ bị làm mờ, tạo giao diện rất tinh tế.

💬

Modal & Hộp Thoại

Làm mờ nền giúp tập trung hoàn toàn vào nội dung của modal, trực quan hóa hệ thống phân cấp.

🃏

Thẻ UI & Bảng Giá

Hiệu ứng kính mờ trên bảng giá và thẻ tính năng tạo cảm giác cao cấp và hiện đại.

🎛

Bảng Điều Khiển (Dashboard)

Sử dụng cho các panel trong SaaS dashboard để duy trì khả năng đọc tốt ngay cả trên nền phức tạp.

Công cụ liên quan

Trình tạo CSSXem tất cả

☁️

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.

📐

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 hiệu ứng CSS (Animation)

Thiết kế và xuất mã CSS cho các hoạt ảnh (keyframes) chuyển động.

♿

Trình kiểm tra độ tương phản (WCAG)

Đánh giá độ tương phản màu sắc theo tiêu chuẩn trợ năng WCAG.

✨

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.

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ụ.