سایه‌ها به المان‌ها عمق و بُعد میدن و باعث میشن طراحی‌ت حرفه‌ای‌تر و واقعی‌تر به نظر برسه.
در CSS دو نوع سایه داریم:

1. text-shadow → سایه برای متن

2. box-shadow → سایه برای جعبه‌ها (div, card, button و …)

🔹 ۱. text-shadow

برای افزودن سایه به متن استفاده میشه.

h1 {
  text-shadow: 2px 2px 5px gray;
}

📌 ترتیب مقادیر:

1. offset-x → فاصله سایه در جهت افقی (مثبت = راست، منفی = چپ)

2. offset-y → فاصله سایه در جهت عمودی (مثبت = پایین، منفی = بالا)

3. blur-radius → میزان محوشدگی (اختیاری)

4. color → رنگ سایه

مثال‌های بیشتر:

/* سایه قرمز واضح */
h2 {
  text-shadow: 3px 3px red;
}

/* سایه محو */
h3 {
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/* چند سایه برای یک متن */
h4 {
  text-shadow: 2px 2px 2px black, -2px -2px 2px gray;
}

🔹 ۲. box-shadow

برای اضافه کردن سایه به جعبه‌ها، دکمه‌ها، تصاویر و …

div {
  width: 200px;
  height: 100px;
  background: lightblue;
  box-shadow: 5px 5px 15px gray;
}

📌 ترتیب مقادیر:

1. offset-x → فاصله افقی سایه

2. offset-y → فاصله عمودی سایه

3. blur-radius → محوشدگی

4. spread-radius → اندازه سایه (مثبت = بزرگ‌تر، منفی = کوچک‌تر)

5. color → رنگ

🎨 مثال‌های box-shadow:

/* سایه ساده */
.box1 {
  box-shadow: 5px 5px gray;
}

/* سایه محو */
.box2 {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}

/* سایه داخلی */
.box3 {
  box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5);
}

/* چند سایه برای یک المان */
.box4 {
  box-shadow: 2px 2px 5px red, -2px -2px 5px blue;
}

🔹 نکات مهم

• از rgba برای سایه شفاف و طبیعی استفاده کن.

• سایه داخلی (inset) برای ساخت افکت‌های 3D و فرو رفتگی عالیه.

• می‌تونی با transition + hover سایه‌های متحرک بسازی.

مثال:

button {
  padding: 10px 20px;
  background: coral;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

button:hover {
  box-shadow: 0px 8px 20px rgba(0,0,0,0.4);
}

✅ نتیجه:
text-shadow برای متن‌ها و box-shadow برای المان‌ها استفاده میشه. با ترکیب این دو می‌تونی طراحی‌های زیبا و مدرن بسازی.