Css đổ bóng cho text

 Chào các bạn, 

Đây là một ví dụ css đổ bóng cho text

Trong CSS, để tạo hiệu ứng bóng đổ cho văn bản, bạn sử dụng thuộc tính text-shadow. Thuộc tính này giúp làm nổi bật văn bản bằng cách thêm bóng với màu sắc, độ mờ, và khoảng cách tùy chỉnh.

Cú pháp cơ bản: text-shadow: offset-x offset-y blur-radius color;

offset-x: Khoảng cách bóng theo trục ngang (x).

offset-y: Khoảng cách bóng theo trục dọc (y).

blur-radius (tuỳ chọn): Độ mờ của bóng (giá trị càng lớn, bóng càng mờ).

color: Màu sắc của bóng.

Ví dụ:

.simple-shadow {

  font-size: 50px;

  color: #333;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}

💡 Giải thích: Bóng đổ lệch 2px theo chiều ngang và dọc, mờ 4px, màu đen trong suốt 50%.

==========

Ví dụ nâng cao:
1. Bóng đổ nhiều lớp (Multi-layer Shadow)

.multiple-shadow {

  font-size: 60px;

  color: #fff;

  text-shadow: 

    1px 1px 2px #000,    /* Bóng nhỏ gần chữ */

    3px 3px 5px #555;    /* Bóng lớn hơn */

}

💡 Giải thích: Kết hợp nhiều lớp bóng để tạo hiệu ứng chiều sâu.

============

2. Bóng neon phát sáng

.neon-text {

  font-size: 60px;

  color: #fff;

  text-shadow: 

    0 0 5px #0ff, 

    0 0 10px #0ff, 

    0 0 20px #0ff, 

    0 0 40px #0ff, 

    0 0 80px #0ff;

}

💡 Giải thích: Tạo hiệu ứng phát sáng với nhiều lớp bóng đổ màu xanh dương.

3. Bóng đổ 3D

.text-3d {
  font-size: 60px;
  color: #fff;
  text-shadow: 
    1px 1px 0px #ccc,
    2px 2px 0px #bbb,
    3px 3px 0px #aaa,
    4px 4px 0px #999,
    5px 5px 0px #888;
}

💡 Giải thích: Bóng đổ xếp lớp để tạo hiệu ứng 3D.

4. Bóng đổ mờ nhẹ (Subtle Shadow)
.soft-shadow {
  font-size: 40px;
  color: #444;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

💡 Giải thích: Tạo bóng đổ nhẹ nhàng, tự nhiên.

Lưu ý:
text-shadow được hỗ trợ trên tất cả các trình duyệt hiện đại.
Nếu muốn tạo viền cho văn bản, kết hợp với text-stroke hoặc sử dụng nhiều lớp text-shadow.