ویژگی text-shadow CSS سایه هایی را به متن اضافه می کند.

فهرستی از سایه‌های جدا شده با کاما را می‌پذیرد تا روی متن و هر یک از تزئینات آن اعمال شود. هر سایه با ترکیبی از جابجایی های X و Y از عنصر، شعاع تاری و رنگ توصیف می شود.

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

 offset-x | محور افق

 offset-y | محور عمود

 blur-radius | میزان شفافیت

 color | رنگ متن

برای ایجاد سایه دو یا سه مقدار مشخص می‌شود و به‌ صورت اختیاری مقدار <color> به دنبال آن می‌آید. مقدار اول در جهت افقی یا محور x   <offset-x> فاصله افقی را مشخص می کند. از  عدد منفی هم میشود استفاده کرد که سایه را در سمت چپ متن قرار می دهد.  و مقدار دوم در جهت عمودی یا محور y  <offset-y> فاصله عمودی را مشخص می کند. یک مقدار منفی سایه را بالای متن قرار می دهد. سومین مقدار اختیاری که میزان شفافیت متن رو مشخص میکند که اختیاری است هر چه مقدار بالاتر باشد، میزان تاری بیشتر میشود. اگر مشخص نشده باشد، پیش‌فرض ۰ در نظر گرفته میشود.

اگر هر دو مقدار اول ۰ باشند، سایه مستقیماً در پشت متن قرار می گیرد، اگرچه ممکن است به دلیل تأثیر <blur-radius> تا حدی قابل مشاهده باشد.

مقدار اخر رنگ سایه است که اختیاری می باشد می توان آن را قبل یا بعد از مقادیر مشخص کرد. اگر مشخص نباشد، مقدار رنگ به عامل کاربر واگذار می‌شود، بنابراین زمانی که یکپارچگی در مرورگرها مورد نظر است، باید آن را به صراحت تعریف کنید.

مثال :

کدهای html

<p class="text-shadow"> www.idejet.ir </p>

کدهای css

.text-shadow
{
 text-shadow: green 6px 3px 5px;
 color: white;
}        

خروجی :

شما می توانید چندین سایه به یک متن بدهید فقط کافی است سایه ها به وسیله ویرگول از هم جدا شوند،

هنگامی که بیش از یک سایه داده می شود، سایه ها از جلو به عقب اعمال می شوند، با اولین سایه مشخص شده در بالا.

مثال :

کدهای html

<p class="text-shadow"> www.idejet.ir </p>

کدهای css

.text-shadow
{
text-shadow: 1px 1px 2px black, 0 0 2em blue, 0 0 0.2em blue;
color: white;
}

خروجی :