Trình tạo mã bóng đổ CSS (Box-shadow Generator)

Trình tạo mã bóng đổ CSS là gì?

Trình tạo mã bóng đổ CSS là công cụ hỗ trợ chọn thông số, xem trước và tạo khai báo box-shadow cho phần tử dạng hộp trên trang web. Thay vì tự viết từng giá trị rồi chuyển qua lại giữa mã và giao diện, người dùng có thể điều chỉnh vị trí, độ mờ, độ lan rộng và màu bóng trong cùng một màn hình.

Về kiến thức CSS, box-shadow là thuộc tính tạo bóng ở bên ngoài hoặc bên trong hộp phần tử. Hộp này có thể thuộc về thẻ nội dung, nút, ô nhập liệu hoặc một vùng giao diện khác. Thuộc tính CSS quyết định cách trình duyệt vẽ bóng; công cụ chỉ cung cấp giao diện để lựa chọn và ghép các thông số thành khai báo tương ứng.

Quá trình sử dụng gồm ba hoạt động chính: chỉnh giá trị, quan sát hộp mẫu và lấy mã CSS. Hình xem trước cùng nội dung mã được cập nhật khi đầu vào thay đổi. Người dùng còn có thể đổi màu hộp mẫu và nền để đánh giá bóng trong các bối cảnh màu khác nhau.

Phạm vi kết quả là một lớp bóng, được trình bày bằng một khai báo chuẩn duy nhất. Đây không phải trình tạo thành phần giao diện hoàn chỉnh: mã nhận được không chứa cấu trúc HTML, bộ chọn CSS, kích thước, màu nền hoặc bo góc của hộp mẫu. Công cụ cũng không tạo mọi loại bóng cho chữ hay hình dạng trong suốt.

Các thuật ngữ cần hiểu khi chỉnh bóng đổ CSS

Độ lệch ngang và dọc

Độ lệch ngang và dọc là khoảng dịch chuyển của bóng theo hai trục, tính bằng px. Theo cách hiểu chuẩn của CSS, X dương dịch bóng sang phải, X âm sang trái; Y dương dịch xuống dưới, Y âm lên trên. Hai giá trị bằng 0 đặt bóng không lệch khỏi vị trí hộp. Cần phân biệt việc dịch chuyển với việc tăng kích thước bóng: thay đổi X hoặc Y không thay thế cho spread. Chẳng hạn, X bằng 10 px chỉ biểu thị độ lệch ngang, không có nghĩa bóng rộng thêm 10 px.

Blur radius

Blur radius là thông số làm mềm mép bóng. Giá trị 0 px không áp dụng hiệu ứng làm mờ, nên bóng có mép sắc; tăng blur tạo vùng chuyển tiếp mềm hơn. Công cụ cho điều chỉnh thông số này từ 0 đến 100 px. Blur không phải độ trong suốt: bóng có thể mềm nhưng vẫn mang màu với alpha cao. Nó cũng không phải bán kính bo góc của hộp. Không nên suy ra một kích thước vùng bóng chính xác chỉ bằng cách cộng blur vào chiều rộng phần tử.

Spread radius

Spread radius điều chỉnh mức mở rộng hoặc thu hẹp hình bóng trước khi áp dụng hiệu ứng mờ. Với bóng ngoài, giá trị dương mở rộng hình bóng, giá trị âm thu hẹp, còn 0 không thêm thay đổi này. Trong công cụ, spread nằm từ -50 đến 50 px. Điểm dễ nhầm là cho rằng spread âm khiến bóng dịch sang trái hoặc lên trên; hướng dịch thuộc về X và Y. Khi dùng bóng trong, cần đọc spread trong bối cảnh inset thay vì coi kết quả giống hoàn toàn bóng ngoài.

RGBA và alpha

RGBA là cách biểu diễn màu bằng ba thành phần đỏ, xanh lá, xanh dương và một hệ số alpha. Alpha bằng 0 nghĩa là màu hoàn toàn trong suốt; alpha bằng 1 nghĩa là hoàn toàn đục. Công cụ chuyển màu được chọn sang RGB rồi ghép alpha vào màu bóng. Vì vậy, thanh điều chỉnh này chỉ thay đổi độ đục của bóng, không làm cả hộp hay nội dung bên trong mờ đi. Nhãn “Opacity” trên giao diện cần được hiểu theo phạm vi màu bóng, không phải thuộc tính opacity của toàn phần tử.

Inset

inset là từ khóa chuyển bóng từ bên ngoài vào bên trong hộp. Trong công cụ, đây là lựa chọn bật hoặc tắt, quyết định có thêm từ khóa này vào giá trị CSS hay không. Bóng trong thường được dùng để thử cảm giác lõm hoặc nhấn mạnh mép bên trong của vùng nội dung. Inset không tự sinh một lớp bóng thứ hai, cũng không đơn thuần đổi dấu X và Y. Các thông số độ lệch, blur, spread và màu vẫn được giữ để trình duyệt diễn giải theo chế độ bóng trong.

Đầu vào và mã CSS nhận được gồm những gì?

Thông số hình học và màu sắc

Năm thanh trượt kiểm soát bốn độ dài và alpha của màu bóng, mỗi thanh đi kèm một ô nhập số để gõ giá trị chính xác. Bốn thanh độ dài dùng bước 1; alpha hiển thị theo phần trăm với bước 1%, tương ứng bước 0,01 trong mã. Ngoài ra còn có các mẫu nhanh một lớp, ô nhập mã HEX cho màu, và một thanh bo góc chỉ phục vụ xem trước.

Màu bóng mặc định là #111111, còn inset mặc định tắt. Hai lựa chọn này tham gia trực tiếp vào mã tạo ra. Ngược lại, màu hộp #fdfd96 và màu nền #ffffff chỉ dùng cho bối cảnh xem trước. Đổi chúng giúp quan sát độ tương phản nhưng không thêm khai báo màu vào đầu ra. Bo góc của hộp mẫu cũng chỉ phục vụ xem trước, mặc định 12 px và có thể chỉnh từ 0 đến 48 px.

Các khoảng trên là giới hạn của giao diện công cụ, không phải toàn bộ phạm vi giá trị hợp lệ của CSS. Không nên từ giới hạn thanh trượt suy ra rằng mọi dự án web đều chỉ được dùng các độ dài này.

Hình xem trước và các khai báo xuất ra

Kết quả gồm hộp mẫu có bóng và một khai báo chuẩn duy nhất: box-shadow. Khai báo này không đại diện cho nhiều lớp bóng xếp chồng. Khi trang khởi tạo, mã xử lý cũng cập nhật mẫu và đầu ra theo thiết lập mặc định.

Nội dung dành cho sao chép là một khai báo CSS duy nhất, không phải một stylesheet hoàn chỉnh. Nó không kèm bộ chọn để xác định phần tử nhận bóng, màu hộp, màu nền, kích thước, đường viền hay bo góc mẫu. Những đặc điểm đó cần được quản lý riêng trong thiết kế thực tế.

Công cụ ghép giá trị box-shadow như thế nào?

Thứ tự các thành phần của bóng

Công cụ tạo giá trị theo thứ tự: từ khóa inset nếu bật, độ lệch ngang, độ lệch dọc, blur, spread và màu RGBA. Có thể đọc cấu trúc này dưới dạng:

box-shadow: [inset nếu bật] X Y blur spread rgba(đỏ, xanh lá, xanh dương, alpha);

Đây là mô tả thứ tự, không phải khai báo để dán nguyên văn. Trong kết quả thực tế, bốn độ dài đều được thêm đơn vị px. Alpha là hệ số không có đơn vị. Nếu inset tắt, công cụ bỏ từ khóa đó; nếu bật, nó đặt inset ở đầu giá trị, còn các thành phần sau vẫn giữ thứ tự.

Mã không cho thấy thuật toán tự chọn thông số “đẹp”, cân bằng bóng theo kích thước phần tử hoặc tối ưu độ tương phản. Kết quả được ghép trực tiếp từ các lựa chọn hiện tại. Vì vậy, một giá trị hợp lệ về cú pháp không đồng nghĩa với hiệu ứng phù hợp cho mọi giao diện.

Chuyển màu và cập nhật kết quả

Màu HEX được chuyển sang RGB bằng cách đọc từng cặp chữ số theo cơ số 16 rồi đổi sang số thập phân. Ví dụ, cặp 11 tương ứng 17, nên #111111 trở thành RGB (17, 17, 17). Sau đó, alpha đã chọn được ghép thành màu RGBA. Logic chuyển màu có hỗ trợ mở rộng HEX ba chữ số, nhưng giao diện không có ô nhập HEX tự do.

Khi đầu vào thay đổi, công cụ cập nhật nhãn số, áp dụng bóng vào mẫu và tạo lại các khai báo. Màu hộp và nền được áp dụng riêng cho hình xem trước, không tham gia giá trị bóng. Cùng một chuỗi giá trị được dùng cho mẫu và khai báo CSS xuất ra.

Bản mới không thêm tiền tố WebKit hay Mozilla vào đầu ra. Nó không chứng minh khả năng tương thích tuyệt đối với mọi trình duyệt hoặc môi trường. Cần tách những gì mã tạo ra khỏi kết quả kiểm tra trên các trình duyệt mà dự án thực sự hỗ trợ.

Ví dụ đọc kết quả bóng ngoài, bóng trong và bóng trong suốt

Ba tình huống dưới đây được tính theo logic của công cụ công cụ. Các thông số giả định đều nằm trong phạm vi điều chỉnh của giao diện.

Bóng ngoài có mép sắc từ thiết lập mặc định

Giả định giữ nguyên X = 10 px, Y = 10 px, blur = 0 px, spread = 0 px, màu #111111, alpha = 1 và inset tắt. Mỗi cặp 11 của màu HEX chuyển thành 17, nên đầu ra là:

box-shadow: 10px 10px 0px 0px rgba(17, 17, 17, 1);

Cách đọc là bóng ngoài lệch sang phải 10 px và xuống dưới 10 px. Blur bằng 0 tạo mép không làm mờ; spread bằng 0 không mở rộng thêm hình bóng. Alpha 1 giữ màu bóng hoàn toàn đục, nhưng không nói rằng toàn bộ vùng quanh hộp sẽ được phủ bóng.

Bóng bên trong với spread âm

Giả định bật inset, đặt X = -8 px, Y = 6 px, blur = 20 px, spread = -4 px, màu #336699 và alpha = 0,35. Ba cặp HEX 33, 66, 99 lần lượt tương ứng 51, 102 và 153. Khai báo chuẩn sẽ là:

box-shadow: inset -8px 6px 20px -4px rgba(51, 102, 153, 0.35);

Bản mới chỉ xuất một khai báo chuẩn với đúng giá trị này, không còn hai dòng tiền tố. Từ khóa inset xác định bóng bên trong; X và Y là các độ lệch ngang, dọc. Blur 20 px làm mềm mép, còn spread -4 px điều chỉnh phạm vi bóng trong chế độ inset. Alpha được viết bằng dấu chấm trong CSS, dù phần diễn giải tiếng Việt dùng dấu phẩy. Các số này không đủ để kết luận bóng đẹp hoặc tương phản tốt trên một nền bất kỳ.

Có mã bóng nhưng hiệu ứng không nhìn thấy

Giả định giữ thiết lập mặc định nhưng giảm alpha xuống 0. Khai báo chuẩn trở thành:

box-shadow: 10px 10px 0px 0px rgba(17, 17, 17, 0);

Các độ dài và màu RGB vẫn có trong mã, nhưng alpha 0 làm màu bóng hoàn toàn trong suốt. Vì vậy, có khai báo không đồng nghĩa với có hiệu ứng nhìn thấy. Nếu tiếp tục đổi màu hộp hoặc nền, hình mẫu đổi bối cảnh nhưng giá trị bóng trên vẫn giữ nguyên. Muốn bóng xuất hiện trở lại trong giả định này, cần alpha lớn hơn 0; mức độ dễ thấy còn phụ thuộc màu và vị trí bóng.

Ứng dụng bóng đổ cho thẻ nội dung, nút và ô nhập liệu

Tạo phân cấp thị giác bằng bóng ngoài

Trong thiết kế web nói chung, bóng ngoài có thể giúp tách thẻ nội dung hoặc nút khỏi nền, tạo dấu hiệu về phân cấp và độ nổi. Tuy nhiên, cảm nhận đó còn phụ thuộc màu nền, khoảng cách giữa các phần tử và mức độ tương phản. Tăng độ đậm của bóng không tự động làm bố cục rõ ràng hơn nếu nhiều thành phần cùng cạnh tranh sự chú ý.

Bóng mép sắc và bóng mềm là hai hướng thử nghiệm thị giác, không phải preset được xác nhận trong công cụ. Mép sắc có thể tạo cảm giác đồ họa rõ nét; mép mềm có thể tạo chuyển tiếp nhẹ hơn. Khi chọn được giá trị, người dùng đặt các khai báo vào quy tắc CSS của phần tử muốn áp dụng. Công cụ không tự gắn bóng vào website.

Trước khi dùng chung một giá trị cho nhiều thẻ hoặc nút, nên kiểm tra kích thước, màu nền và bo góc thực tế. Một độ lệch phù hợp với thẻ lớn có thể chiếm tỷ lệ quá lớn trên nút nhỏ.

Thử hiệu ứng lõm bằng bóng trong

Bóng trong có thể dùng để thử cảm giác lõm cho ô nhập liệu hoặc vùng nội dung. Đây là ứng dụng của CSS, không phải chức năng tạo sẵn ô nhập liệu của công cụ. Hiệu ứng cần được đánh giá cùng màu nền, đường viền và nội dung bên trong để tránh làm vùng nhập trở nên tối hoặc khó đọc.

Với thành phần tương tác, bóng trang trí không thay thế việc thiết kế trạng thái focus rõ ràng. Cần kiểm tra riêng khả năng nhận biết vị trí đang nhập và khả năng đọc chữ. Việc mẫu trông ổn trên một hộp trống chưa chứng minh hiệu ứng phù hợp khi có văn bản, biểu tượng hoặc nhiều trạng thái tương tác.

Box-shadow khác text-shadow và drop-shadow như thế nào?

Bóng của hộp, chữ và hình dạng trong suốt

box-shadow tạo bóng theo hộp phần tử, trong khi text-shadow tạo bóng theo các ký tự. Chúng phục vụ những đối tượng khác nhau và có cấu trúc giá trị không hoàn toàn giống nhau. Vì vậy, không thể biến mã công cụ thành bóng chữ chỉ bằng cách dùng nguyên khai báo cho phần tử chứa văn bản: bóng vẫn thuộc về hộp của phần tử đó.

Theo kiến thức CSS, filter: drop-shadow() có thể phù hợp khi muốn bóng bám theo hình dạng có vùng trong suốt. Chẳng hạn, một ảnh biểu tượng có nền trong suốt có thể cần bóng theo phần hình nhìn thấy thay vì theo khung chữ nhật. Áp dụng box-shadow lên phần tử ảnh vẫn tạo bóng theo hộp ảnh, không tự dò đường viền nội dung trong ảnh.

Công cụ chỉ tạo box-shadow. Không có đầu vào hoặc đầu ra riêng cho bóng chữ hay bộ lọc drop-shadow.

Phạm vi sử dụng trên web và nền tảng khác

Kết quả là khai báo CSS dành cho web. Với Tailwind, cách đưa giá trị tùy chỉnh vào dự án phụ thuộc phiên bản và cấu hình; công cụ không tạo sẵn lớp tiện ích Tailwind. React Native và Flutter có hệ thống kiểu hoặc API giao diện riêng, nên không nên coi khai báo CSS này là mã dùng trực tiếp cho mọi nền tảng.

Một môi trường cụ thể có thể hỗ trợ cơ chế bóng tương tự, nhưng khả năng đó cần đối chiếu tài liệu và điều kiện sử dụng của môi trường ấy. Công cụ không chứng minh có bộ chuyển đổi hoặc tích hợp tự động cho các nền tảng này.

Giới hạn của hình xem trước và những điểm cần kiểm tra

Vì sao mẫu có thể khác phần tử thật?

Trong kiểu trình bày này, hộp mẫu có chiều rộng và chiều cao đặt là 150 px, đường viền 3 px và bo góc mặc định 12 px (có thể chỉnh từ 0 đến 48 px, chỉ phục vụ xem trước). Những đặc điểm này không được đưa vào mã xuất. Do đó, khi cùng giá trị bóng được áp dụng lên phần tử khác kích thước, hình dạng hoặc màu nền, cảm nhận có thể thay đổi.

Vùng xem trước có chiều cao 300 px và ẩn phần tràn. Bóng lớn có thể bị cắt ở ranh giới vùng mẫu, dù khai báo được ghép đúng. Cũng chưa thể xác nhận toàn bộ kiểu trình bày chung của website có ghi đè mẫu hay không. Hình mẫu nên được dùng để đánh giá ban đầu, sau đó kiểm tra lại trong bố cục thật.

Giới hạn đầu ra và sao chép

Mã chỉ thể hiện một lớp bóng, không có giao diện thêm lớp, chỉnh kích thước mẫu, nhập CSS để phân tích, lưu cấu hình hoặc tải tệp. Công cụ có thêm các mẫu nhanh (preset) một lớp, nhưng preset chỉ đặt sẵn một bộ thông số, không tạo thêm lớp bóng. Không nên mặc định các khả năng này tồn tại chỉ vì chúng thường xuất hiện ở những công cụ tương tự.

Sao chép dùng Clipboard API của trình duyệt và chỉ hiện thông báo thành công khi thao tác ghi clipboard được xác nhận; nếu trình duyệt không cho phép, công cụ báo rõ là chưa sao chép được. Khi đó, có thể chọn văn bản đầu ra và sao chép thủ công.

Phần mã hiện có cũng không đủ để kết luận về toàn bộ hoạt động lưu trữ, theo dõi hoặc xử lý dữ liệu của website. Không có cơ sở khẳng định đã kiểm thử đa trình duyệt, xử lý hoàn toàn cục bộ hay bảo mật tuyệt đối.

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

Vì sao đã có mã CSS nhưng tôi vẫn không thấy bóng?

Trước hết hãy kiểm tra alpha: nếu bằng 0, màu bóng hoàn toàn trong suốt dù khai báo vẫn tồn tại. Nếu alpha lớn hơn 0, bóng vẫn có thể khó nhận ra do màu gần với nền, vị trí bị hộp che hoặc hiệu ứng quá nhẹ trong bối cảnh hiện tại. Khi áp dụng vào website, còn cần kiểm tra khai báo có thực sự tác động lên phần tử mong muốn hay bị quy tắc khác ghi đè. Không thể xác định một nguyên nhân duy nhất chỉ từ việc “không thấy bóng”.

Vì sao bóng bị cắt trong vùng xem trước?

Vùng mẫu được thiết lập ẩn phần tràn, nên phần bóng vượt ra ngoài ranh giới có thể không được hiển thị. Hiện tượng này dễ xuất hiện khi tăng độ lệch, blur hoặc spread. Nó không tự chứng minh rằng mã bóng sai. Khi đưa vào trang thật, hãy xem phần tử chứa có giới hạn hiển thị tương tự hay không. Cùng khai báo có thể hiện đầy đủ ở một bố cục nhưng bị cắt ở bố cục khác vì điều kiện của vùng chứa.

Công cụ có tạo nhiều lớp box-shadow cùng lúc không?

Không, giao diện và Logic của công cụ chỉ tạo một lớp bóng từ bộ thông số hiện tại. Đầu ra chỉ có một khai báo chuẩn duy nhất, không phải nhiều lớp. Về kiến thức CSS, thuộc tính chuẩn có thể nhận nhiều bóng phân cách bằng dấu phẩy, nhưng công cụ này không có giao diện thêm hoặc quản lý từng lớp. Nếu cần hiệu ứng nhiều lớp, phải xử lý riêng trong CSS và kiểm tra lại kết quả trên phần tử thực tế.

Mã sao chép có bao gồm màu hộp, màu nền và bo góc không?

Không. Mã sao chép chỉ chứa các khai báo bóng đổ; màu hộp và nền là lựa chọn phục vụ quan sát. Bo góc, đường viền và kích thước cũng thuộc kiểu trình bày của mẫu, không nằm trong đầu ra. Vì vậy, việc dán mã vào một phần tử có sẵn chỉ thay đổi bóng nếu khai báo được áp dụng đúng, không làm phần tử trở thành bản sao của hộp mẫu. Muốn tái tạo toàn bộ diện mạo, bạn cần thiết lập các thuộc tính còn lại riêng.

Có thể dùng trực tiếp kết quả cho Tailwind, React Native hoặc Flutter không?

Không nên coi kết quả là mã chuyển đổi sẵn cho cả ba môi trường. Đây là CSS web, nên trong dự án dùng Tailwind bạn có thể cần lựa chọn cách khai báo phù hợp với phiên bản và cấu hình đang dùng. React Native hoặc Flutter cần đối chiếu hệ thống kiểu và API của từng nền tảng, thay vì dán nguyên các dòng CSS. Công cụ không xuất lớp Tailwind, đối tượng kiểu React Native hay cấu hình bóng Flutter, và không có bằng chứng về tích hợp tự động.

Vì sao xuất hiện thông báo đã copy nhưng tôi không dán được mã?

Ở bản mới, thông báo thành công chỉ hiện khi thao tác ghi clipboard được xác nhận, nên thông báo là xác nhận đáng tin hơn trước. Trình duyệt hoặc môi trường nhúng vẫn có thể chặn thao tác; khi đó công cụ báo rõ là chưa sao chép được thay vì báo thành công. Bạn nên thử dán vào nơi nhận văn bản thuần; nếu vẫn không có nội dung, hãy chọn khai báo đang hiển thị và dùng thao tác sao chép thủ công.

Có cần giữ cả -webkit-box-shadow và -moz-box-shadow không?

Không nhất thiết trong mọi dự án. Với các trình duyệt hiện đại hỗ trợ thuộc tính chuẩn, box-shadow thường là khai báo cần dùng; nhu cầu giữ tiền tố phụ thuộc phạm vi trình duyệt mục tiêu và yêu cầu tương thích cụ thể. Bản mới của công cụ chỉ xuất khai báo chuẩn, không còn tạo hai dòng tiền tố; với trình duyệt rất cũ ngoài phạm vi hỗ trợ hiện tại, quyết định giữ tiền tố vẫn thuộc về dự án cụ thể. Hãy quyết định theo môi trường dự án và kết quả kiểm tra thực tế, không chỉ theo thói quen thêm tiền tố.