یک کارت ساده در HTML ایجاد کنید و با استفاده از خصوصیت CSS box-shadow به آن سایه‌ای نرم و رنگی بدهید تا عمق و برجستگی مشاهده شود.

برای حل، یک عنصر با کلاس مثل .card در HTML بسازید و در فایل CSS با استفاده از قاعده box-shadow مقدار دلخواه برای offset-x، offset-y، blur-radius و رنگ (ترجیحاً با rgba برای شفافیت) تعیین کنید؛ مثلاً box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.05) برای سایه‌های چندگانه قابل استفاده است. نکات: برای سایه داخلی از inset استفاده کنید، با مقادیر blur و spread آزمایش کنید تا نتیجه دلخواه را بگیرید، و برای افکت تعاملی می‌توانید transition و تغییر مقادیر box-shadow روی :hover اضافه کنید.