🌅جنراتور گرادیان CSS

تفاوت linear، radial و conic

گرادیان CSS سه تابع دارد که نحوه تغییر رنگ متفاوتی دارند و همه در ویژگی background نوشته می‌شوند.

• linear-gradient：linear-gradient یک گرادیان خطی است که در آن رنگ در امتداد خط مستقیم با زاویه مشخص شده تغییر می‌کند.
• radial-gradient：radial-gradient یک گرادیان شعاعی است که در آن رنگ از موقعیت مرکز به‌سمت بیرون و به شکل دایره یا بیضی پخش می‌شود.
• conic-gradient：conic-gradient یک گرادیان مخروطی است که در آن رنگ دور موقعیت مرکز به صورت ساعتگردی و در یک دور کامل تغییر می‌کند.

تناظر زاویه و کلمات کلیدی جهت

زاویه linear-gradient در آن 0deg از پایین به بالا است و با افزایش عدد ساعتگردی می‌چرخد. زاویه را می‌توان با کلمات کلیدی جهت مثل «to right» نوشت و 90deg مانند «to right» و 180deg مانند «to bottom» است.

نحوه نوشتن نقطه توقف رنگ و شفافیت

نقطه توقف رنگ (color stop) موقعیتی در گرادیان است که آن رنگ به وجود می‌آید، 0% نقطه شروع و 100% نقطه پایان است. مثلاً «#3B82F6 0%, #8B5CF6 100%» رنگ‌تغییر از آبی در شروع تا بنفش در پایان است.

• #RRGGBB format：#RRGGBB فرمتی برای نوشتن رنگ است که در آن قوت قرمز، سبز و آبی را با 2 رقم هگزادسیمال نشان می‌دهند و #FF0000 قرمز کاملاً مات است.
• rgba format：rgba فرمتی برای نوشتن رنگ است که مقادیر قرمز، سبز و آبی (0-255) و شفافیت (0-1) را دارد و شفافیت 0.5 نشان‌دهنده رنگ نیمه‌شفاف است.