با استفاده از CSS یک پس‌زمینه گرادیان خطی بین دو رنگ ایجاد کنید که از گوشه بالا-چپ به گوشه پایین-راست برود و روی یک عنصر div با کلاس .card اعمال شود.

برای ایجاد گرادیان از گوشه بالا-چپ به پایین-راست، می‌توان از background: linear-gradient(to bottom right, #ff7a7a, #ffd67a); استفاده کرد و آن را به .card اختصاص داد. برای پشتیبانی مرورگرهای قدیمی‌تر، از یک رنگ پس‌زمینه ساده هم به عنوان fallback قبل از گرادیان استفاده کن و اندازه و ارتفاع .card را مشخص کن تا گرادیان به وضوح دیده شود. اگر نیاز داشتی، با تغییر زاویه یا استفاده از color-stopها می‌توانی شدت یا نقطه شروع/پایان رنگ‌ها را دقیق‌تر کنترل کنی. همچنین می‌توانی از background-image به همان شکل استفاده کنی تا قابلیت override با تصاویر یا سایر پس‌زمینه‌ها را حفظ کنی.