Softonic

Bộ tạo bóng chữ CSS

Bước 1 / 2
Tạo CSS

Căn chỉnh khai báo text-shadow bằng mắt trong DevTools cũng được, nhưng sẽ thành đoán mò ngay khi bạn cần một quầng sáng neumorphic mềm mại, bóng đổ hai lớp kiểu retro hay một đường viền sắc nét chỉ 1px trên tiêu đề lớn. Bộ tạo này cho phép bạn thiết lập độ lệch X, độ lệch Y, bán kính mờ và màu RGBA và sao chép một dòng CSS sẵn sàng để dán.

Cách tạo hiệu ứng bóng văn bản

  1. 1

    Thiết lập các giá trị lệch

    X là độ lệch ngang tính bằng pixel; Y là độ lệch dọc. Giá trị dương của Y sẽ đẩy bóng xuống dưới, giá trị âm của Y sẽ đẩy bóng lên trên.

  2. 2

    Chọn bán kính mờ

    Độ mờ 0 tạo ra một hình bóng sắc nét; giá trị càng cao thì bóng càng nhạt dần. Các bóng mềm thông thường dùng độ mờ từ 4 đến 12 pixel.

  3. 3

    Chọn một màu sắc

    Hãy dùng chuỗi RGBA để điều chỉnh độ trong suốt. Giá trị `rgba(0,0,0,0.35)` là lựa chọn mặc định an toàn cho độ sâu tinh tế trên nền sáng.

  4. 4

    Sao chép khai báo

    Công cụ sẽ xuất ra `text-shadow: Xpx Ypx Blurpx color;`, hãy đưa nó vào bộ chọn tương ứng trong bảng định kiểu của bạn.

Những công thức bóng chữ trông thực sự đẹp

Bóng chữ là tổng của bốn con số và một màu sắc. Ghi nhớ điều này thì bạn có thể tái tạo gần như mọi hiệu ứng thấy trên tạp chí hay trang đích.

Bảng tra nhanh

Hiệu ứng Khai báo
Độ sâu tinh tế text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Bóng đổ mềm text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Viền 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Đôi kiểu retro text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Quầng sáng neon text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Xếp chồng nhiều bóng

text-shadow chấp nhận một danh sách phân tách bằng dấu phẩy. Trình duyệt vẽ theo thuật toán của họa sĩ, theo thứ tự trong mã nguồn – bóng cuối cùng trong danh sách nằm phía sau tất cả những bóng khác. Hãy dùng điều này để mô phỏng đường viền (bốn bóng cứng 1px theo bốn hướng) hoặc tạo chiều sâu bằng cách chồng một bóng gần sắc nét lên một bóng xa lan tỏa.

Khi nào nên bỏ qua bóng chữ

  • Với văn bản nội dung rất nhỏ, độ mờ trên 2px sẽ khiến các chữ cái trông nhòe nhoẹt. Hãy ưu tiên -webkit-font-smoothing và độ tương phản mạnh hơn.
  • Với các hoạt ảnh phần hero quan trọng về hiệu năng, tránh xếp chồng quá ba bóng; mỗi lớp buộc trình duyệt phải raster hóa lại văn bản.
  • Nếu bạn cần một bóng có độ lệch sát trên một đường phức tạp (đường cong, phép xoay), hãy cân nhắc dùng <filter> của SVG kèm feDropShadow – nó sẽ bám theo đường viền của chữ chính xác hơn.

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

Theo thiết kế, kết quả chỉ là một lớp bóng duy nhất. Để chồng nhiều hiệu ứng, hãy chạy bộ tạo vài lần rồi nối các kết quả bằng dấu phẩy, ví dụ: text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow tuân theo đường viền của ký tự trong văn bản được hiển thị; box-shadow tuân theo khung hình chữ nhật bao quanh phần tử đó. Cả hai đều sử dụng các tham số tương tự, nhưng được xử lý bằng kỹ thuật raster hóa trên những hình dạng hoàn toàn khác nhau.

Trình duyệt raster hóa bóng chữ theo lưới điểm ảnh của thiết bị. Một bóng có độ mờ bằng 0 trên màn hình 2x sẽ được hiển thị ở các vị trí dưới điểm ảnh và có thể trông hơi mềm. Tăng độ mờ lên 1 thường khắc phục được điều này mà không thay đổi độ đậm thị giác.

Các giá trị bạn nhập được gửi đến máy chủ của chúng tôi để tạo khai báo, nhưng không được lưu trữ hay tái sử dụng. Ở chế độ nhiều bước, các giá trị này được truyền qua liên kết giữa các bước; ở chế độ một trang, không có gì được giữ lại, chỉ cần làm mới trang là mọi thứ biến mất.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Bộ chuyển đổi Base64 sang Hex

Chuyển chuỗi Base64 chuẩn thành các byte nền tảng được viết dưới dạng hexadecimal liên tục in hoa. Giải mã nghiêm ngặt, lý tưởng cho token, khóa và chữ ký JWT.

Trình xem hex của tệp nhị phân

Chọn một tệp và kiểm tra phần dữ liệu giới hạn từ bất kỳ offset byte hợp lệ nào dưới dạng hex dump cục bộ với cột offset, hex và ASCII.

Trình tạo bảng màu ngẫu nhiên

Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.

Công cụ này có phiên bản bằng các ngôn ngữ khác