Trình Tạo CSS
Tạo mã CSS trực quan cho các hiệu ứng thường dùng — kéo thanh trượt, xem trước ngay và sao chép CSS dán thẳng vào dự án. Tất cả chạy trên trình duyệt.
Các bước
- Chọn hiệu ứng ở thanh tab: Box Shadow, Border Radius, Cubic Bezier, Text Shadow hoặc Glassmorphism.
- Chỉnh các thông số bằng thanh trượt và ô chọn màu; khung bên phải xem trước trực tiếp.
- Bấm Sao chép CSS để lấy đoạn mã và dán vào file CSS của bạn.
Từng hiệu ứng
- Box Shadow: đổ bóng cho khối — chỉnh độ lệch ngang/dọc, độ nhoè, độ toả, màu, độ mờ và bật inset (bóng bên trong).
- Border Radius: bo góc — đồng đều 4 góc hoặc chỉnh riêng từng góc.
- Cubic Bezier: đường cong easing cho animation — kéo 2 điểm điều khiển hoặc chọn nhanh ease / ease-in / ease-out / ease-in-out.
- Text Shadow: đổ bóng cho chữ.
- Glassmorphism: hiệu ứng kính mờ (nền trong +
backdrop-filter: blur).
Mẹo
- Bóng tinh tế: độ nhoè lớn + độ mờ thấp trông nhẹ nhàng, chuyên nghiệp hơn bóng đậm.
- Glassmorphism chỉ đẹp khi có nền phía sau (ảnh hoặc gradient) để thấy phần mờ.
Câu hỏi thường gặp
CSS xuất ra dùng ngay được không?
Được — đoạn mã là thuộc tính CSS chuẩn, dán vào quy tắc CSS của phần tử là chạy. Cubic-bezier dùng kèm transition/animation.
Có hỗ trợ nhiều lớp bóng không?
Bản này tạo một bóng mỗi lần; bạn có thể ghép nhiều box-shadow bằng dấu phẩy nếu cần.