ساخت گرادیانهای خطی، شعاعی و مخروطی با stop های نامحدود، درونیابی آگاه از OKLCH و خروجی utility برای Tailwind v4. پیشنمایش زنده، بیش از ۳۰ پیشتنظیم، در مرورگر شما.
خطی در امتداد یک خط مستقیم با زاویهای انتخابشده ترکیب میشود (۰ درجه = به بالا، ۹۰ درجه = به راست). شعاعی از یک نقطهٔ مرکزی به بیرون ترکیب میشود — circle یا ellipse، با کلیدواژههای اندازه مانند farthest-corner. مخروطی حول یک نقطهٔ مرکزی میچرخد — color stop ها مانند عقربههای ساعت در زاویهها قرار میگیرند. مخروطی برای نمودارهای دایرهای، نشانگرهای gauge و پسزمینههای مصنوعی color-wheel عالی است.
هنگام گذار بین هیوهایی که analogous نیستند — مثلاً آبی → زرد، یا قرمز → سبز. درونیابی پیشفرض sRGB از یک میاننقطهٔ خاکستری گلآلود میگذرد؛ OKLCH (CSS Color Module 4 با in oklch) میاننقطه را زنده نگه میدارد چون در فضایی از نظر ادراکی یکنواخت درونیابی میکند. برای گرادیانهای دو-stop ای میان هیوهای مشابه، تفاوت کم است. برای گرادیانهای چند-stop ای یا با گسترهٔ هیوی وسیع، OKLCH بهطور چشمگیری بهتر است.
خطی / شعاعی / مخروطی، با نرمی OKLCH، آگاه از Tailwind — بهعلاوهٔ چند جزئیات کوچک که استفاده از آن را واقعاً لذتبخش میکند.
خطی با زاویهٔ ۰ تا ۳۶۰ درجه، شعاعی با circle/ellipse + اندازه + موقعیت، مخروطی با زاویهٔ شروع + موقعیت. همه خروجیای منطبق با استاندارد CSS Images Module Level 4 تولید میکنند.
stop ها را در هر درصدی اضافه کنید، اسلایدر موقعیت را برای تنظیم دقیق بکشید، روی نمونهرنگ کلیک کنید تا رنگی برگزینید یا یک HEX جایگذاری کنید. stop ها در خروجی بهصورت خودکار مرتب میشوند. برای حذف روی × کلیک کنید (حداقل ۲ stop).
بین درونیابی پیشفرض sRGB و درونیابی مدرن in oklch سوئیچ کنید. OKLCH میاننقاطی از نظر ادراکی نرمتر میدهد — بدون نوارهای خاکستری گلآلود در پرشهای هیو. در مرورگرهایی که هنوز CSS Color 4 را پیاده نکردهاند، بهصورت graceful سقوط میکند.
سه پنل خروجی بهصورت زنده بهروزرسانی میشوند: CSS خام (background-image: linear-gradient(...))، utility مقدار دلخواه Tailwind v4 (bg-[linear-gradient(...)]) و یک قطعهٔ توکن طراحی JSON آمادهٔ Style Dictionary یا Figma Tokens.
Sunset، Ocean، Aurora، Cyber، Royal، Neon Pink، Iris، Bullseye، Conic Wheel — برای بارگذاری و دستکاری کلیک کنید. هر پیشتنظیم یک نقطهٔ شروع واقعاً production-quality است، نه فقط یک نام.
پیشنمایش با background-image بومی رندر میشود، بنابراین آنچه میبینید دقیقاً همان چیزی است که stylesheet شما تولید میکند. هر پیکسل بهصورت محلی اجرا میشود — DevTools را باز کنید → Network و صفر درخواست خروجی را تأیید کنید.
چهار گام از یک صفحهٔ خالی تا CSS، Tailwind یا JSON آمادهٔ production.
خطی برای پسزمینهها، هدرها و بخشهای hero. شعاعی برای spotlight، vignette و دکمههای درخشان. مخروطی برای نمودارهای دایرهای، چرخهای رنگ و پسزمینههای مصنوعی ترند. با تبها بین آنها سوئیچ کنید — color stop های شما بین این تغییرات حفظ میشوند.
روی نمونهرنگ کلیک کنید تا picker باز شود، یا یک HEX را مستقیماً در فیلد جایگذاری کنید. اسلایدر را بکشید تا موقعیت stop بین ۰ تا ۱۰۰ درصد تنظیم شود. روی + افزودن stop کلیک کنید تا یک stop جدید در بزرگترین فاصله (با رنگ میاننقطه) درج شود. در مجموع تا ۱۲ stop.
برای خطی، زاویه را تعیین کنید (۰ درجه به بالا، ۹۰ درجه به راست). برای شعاعی، شکل، کلیدواژهٔ اندازه و موقعیت مرکز را انتخاب کنید. برای مخروطی، زاویهٔ شروع را تعیین کنید. درونیابی رنگ را به OKLCH سوئیچ کنید تا میاننقاط در گرادیانهای چند-هیو از نظر ادراکی نرم باشند.
سه پنل بهصورت زنده بهروزرسانی میشوند: CSS (background-image:...)، Tailwind v4 (bg-[...])، JSON (به شکل توکن طراحی). از آیکون کپی روی هر کدام استفاده کنید، یا روی دانلود CSS بزنید تا یک فایل gradient.css آمادهٔ افزودن به پروژه ذخیره شود.
چهار سناریوی رایج که در آنها یک ابزار مرورگری حریمخصوصیمحور بهتر از باز کردن Figma + یک سایت گرادیان جداگانه است.
یک پیشتنظیم نزدیک به برند خود را انتخاب کنید، دو رنگ برند را در stop ها بریزید، برای میاننقطهای تمیز به درونیابی OKLCH سوئیچ کنید. CSS را کپی کرده و در stylesheet بخش hero خود جایگذاری کنید. زمان کل: کمتر از ۲ دقیقه.
یکبار یک گرادیان برند ۳-stop ای بسازید، آن را بهعنوان توکن طراحی JSON کپی کنید و در Style Dictionary / Figma Tokens بریزید. حالا هر دکمه و کارت در هر پلتفرم با ارجاع از همان گرادیان استفاده میکند. در یک جا بهروزرسانی کنید، در همهجا منتشر میشود.
گرادیانهای مخروطی مصنوعی برای نمودارهای دایرهای، dial های پیشرفت یا حالتهای shimmer در زمان «بارگذاری داده» عالی هستند. نوع مخروطی را انتخاب کنید، زاویهٔ شروع را تعیین کنید و stop ها را در درصدهای درست بریزید — ریاضیات، زاویههای ۰ تا ۳۶۰ درجه را دقیقاً به موقعیتهای درصدی نگاشت میکند.
گرادیان را بسازید، نسبت ابعاد را مطابق هدف تنظیم کنید (16:9 برای اسلاید، 1:1 برای IG، 3:1 برای هدر X)، از پیشنمایش اسکرینشات بگیرید. یا CSS را در یک فایل HTML یکبارمصرف کپی کنید و در مرورگر خود در دقیقاً همان اندازهٔ پیکسلی موردنیاز اسکرینشات بگیرید.
رنگها و گرادیانهای شما هرگز از دستگاه شما خارج نمیشوند. DevTools را باز کنید → Network و خواهید دید که در هیچ عملیاتی هیچ درخواست خروجیای وجود ندارد.
background-image بومی CSS استفاده میکند — بنابراین گرادیان رندر شده دقیقاً با چیزی که stylesheet شما در مرورگر کاربران تولید خواهد کرد منطبق است.
مطالب گزیده دربارهٔ گرادیانهای CSS، درونیابی OKLCH و سیستمهای توکن طراحی.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
خطی در امتداد یک خط مستقیم با زاویهای انتخابشده ترکیب میشود (۰ درجه = به بالا، ۹۰ درجه = به راست). شعاعی از یک نقطهٔ مرکزی به بیرون ترکیب میشود — circle یا ellipse، با کلیدواژههای اندازه مانند farthest-corner. مخروطی حول یک نقطهٔ مرکزی میچرخد — color stop ها مانند عقربههای ساعت در زاویهها قرار میگیرند. مخروطی برای نمودارهای دایرهای، نشانگرهای gauge و پسزمینههای مصنوعی color-wheel عالی است.
هنگام گذار بین هیوهایی که analogous نیستند — مثلاً آبی → زرد، یا قرمز → سبز. درونیابی پیشفرض sRGB از یک میاننقطهٔ خاکستری گلآلود میگذرد؛ OKLCH (CSS Color Module 4 با in oklch) میاننقطه را زنده نگه میدارد چون در فضایی از نظر ادراکی یکنواخت درونیابی میکند. برای گرادیانهای دو-stop ای میان هیوهای مشابه، تفاوت کم است. برای گرادیانهای چند-stop ای یا با گسترهٔ هیوی وسیع، OKLCH بهطور چشمگیری بهتر است.
یک utility مقدار دلخواه که میتوانید مستقیماً در JSX / Blade / HTML جایگذاری کنید: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. نیازی به تغییر tailwind.config.js نیست؛ روی هر پروژهٔ Tailwind 4 کار میکند. اگر توکنهای رنگ نامدار را ترجیح میدهید، بهجای آن CSS را کپی کرده و دستی تبدیل کنید.
گرادیانهای خطی و شعاعی از سال ۲۰۱۴ بهصورت سراسری پشتیبانی میشوند. گرادیانهای مخروطی تا سال ۲۰۲۱ در همهٔ مرورگرهای evergreen پیاده شدند. کلیدواژهٔ درونیابی in oklch در Chrome 111+، Safari 16.2+ و Firefox 113+ پشتیبانی میشود. اگر باید مرورگرهای قدیمیتر را پشتیبانی کنید، از درونیابی پیشفرض sRGB استفاده کنید — تفاوت بصری بیش از همه برای گرادیانهای چند-stop ای با پرش هیو اهمیت دارد.
خیر. تولید رشتهٔ گرادیان، سریالسازی CSS / Tailwind / JSON و پیشنمایش زنده همگی در JavaScript روی دستگاه شما اجرا میشوند. DevTools را باز کنید → Network و خواهید دید که در هیچ عملیاتی هیچ درخواست خروجیای وجود ندارد. رنگهای برند و توکنهای داخلی را جایگذاری کنید — هیچ چیز از لپتاپ شما خارج نمیشود.