CSS Gradients
گرادیانتها (Gradients) روشی هستن برای ایجاد انتقال نرم بین دو یا چند رنگ بدون نیاز به تصویر.
با گرادیانت میتونی پسزمینههای مدرن و زیبا طراحی کنی.
✨ انواع گرادیانتها در CSS
-
Linear Gradient (گرادیانت خطی)
-
Radial Gradient (گرادیانت شعاعی)
-
Conic Gradient (گرادیانت مخروطی / دایرهای زاویهای)
🔹 ۱. Linear Gradient
انتقال رنگها در یک خط مستقیم (افقی، عمودی یا مورب).
🔸 این کد یک گرادیانت از قرمز → زرد به صورت افقی ایجاد میکنه.
📌 میتونی جهت رو تغییر بدی:
-
to bottom
→ عمودی (پیشفرض) -
to right
→ افقی -
to top left
→ مورب -
یا با زاویه:
45deg
,90deg
,180deg
مثال با زاویه:
🔹 ۲. Radial Gradient
انتقال رنگها از یک نقطه مرکزی به اطراف (دایرهای یا بیضوی).
🔸 اینجا رنگها از مرکز شروع میشن و به بیرون پخش میشن.
📌 میتونی شکل و اندازه تعیین کنی:
-
circle
(دایره) -
ellipse
(بیضی) -
closest-side
,farthest-corner
و ... برای اندازه.
🔹 ۳. Conic Gradient
انتقال رنگها به صورت زاویهای دور مرکز (مثل کیک برشخورده 🍰).
📌 این نوع گرادیانت بیشتر برای چارتهای دایرهای یا افکتهای دایرهای استفاده میشه.
🔹 رنگهای چندگانه و درصدها
میتونی چند رنگ با درصد دقیق مشخص کنی:
🔹 شفافیت در گرادیانت
میتونی از رنگهای RGBA یا transparent
استفاده کنی:
🔹 گرادیانت تکراری
برای ایجاد الگوهای زیبا میشه از repeating gradients استفاده کرد:
📌 این کد یه الگوی راهراه میسازه.
✅ نتیجه: با گرادیانت میتونی پسزمینههای حرفهای بسازی بدون اینکه تصویر سنگین لود بشه.