خلفية قسم Hero لصفحة تسويقية
اختر إعدادًا مسبقًا قريبًا من علامتك التجارية، ضع لوني علامتك في النقاط، بدّل إلى استيفاء OKLCH للحصول على نقطة وسطى نظيفة. انسخ CSS والصقه في ورقة أنماط الـHero. الزمن الإجمالي: أقل من دقيقتين.
مولّد تدرّجات CSS
أنشئ تدرّجات خطية وشعاعية ومخروطية بنقاط ألوان غير محدودة، مع استيفاء يدعم OKLCH، ومخرجات أدوات Tailwind v4. معاينة مباشرة، أكثر من 30 إعدادًا مسبقًا، داخل متصفحك.
الخطي يمزج على طول خط مستقيم بزاوية مختارة (0° = للأعلى، 90° = لليمين). الشعاعي يمزج من نقطة مركزية إلى الخارج — دائرة أو قطع ناقص، مع كلمات حجم مثل farthest-corner. المخروطي يدور حول نقطة مركزية — تجلس نقاط الألوان عند زوايا كعقارب الساعة. المخروطي رائع للرسوم الدائرية وقراءات المؤشرات وخلفيات color-wheel الاصطناعية.
عند الانتقال بين درجات لونية غير متشابهة — مثل أزرق → أصفر، أو أحمر → أخضر. الاستيفاء الافتراضي بـ sRGB يمر عبر نقطة وسطى رمادية موحلة؛ أما OKLCH (in oklch ضمن CSS Color Module 4) فيُبقي النقطة الوسطى نابضة لأنه يستوفي في فضاء موحَّد بصريًا. عند تدرّج بنقطتين بين درجات متشابهة يكون الفرق ضئيلًا. أما لتدرّجات متعددة النقاط أو واسعة المدى اللوني فإن OKLCH أفضل بفارق كبير.
نقاط الألوان
CSS
Tailwind v4
JSON
الإعدادات المسبقة
مصمَّم لتدرّجات CSS جاهزة للإنتاج
خطي / شعاعي / مخروطي، نعومة OKLCH، توافق Tailwind — مع لمسات صغيرة تجعل استخدامه ممتعًا فعلًا.
ثلاثة أنواع من التدرّجات
خطي بزاوية من 0 إلى 360°، شعاعي بدائرة/قطع ناقص + الحجم + الموضع، مخروطي بزاوية بداية + الموضع. كلّها تُخرج صياغة CSS Images Module Level 4 المتوافقة مع المعايير.
حتى 12 نقطة ألوان
أضف نقاطًا عند أي نسبة مئوية، اسحب شريط الموضع لضبط دقيق، انقر على عيّنة اللون لاختيار لون أو لصق قيمة HEX. تُرتَّب النقاط تلقائيًا في الإخراج. انقر × للإزالة (نقطتان كحد أدنى).
استيفاء يدعم OKLCH
بدّل بين الاستيفاء الافتراضي بـ sRGB والاستيفاء الحديث in oklch. يمنحك OKLCH نقاطًا متوسطة أكثر نعومة بصريًا — دون أشرطة رمادية موحلة عبر القفزات اللونية. يعود تلقائيًا إلى البديل في المتصفحات التي لم تدعم CSS Color 4 بعد.
مخرجات CSS وTailwind v4 وJSON
ثلاث لوحات إخراج تُحدَّث مباشرةً: CSS الخام (background-image: linear-gradient(...))، أداة بقيمة عشوائية في Tailwind v4 (bg-[linear-gradient(...)])، ومقتطف رموز تصميم بصيغة JSON جاهز لـ Style Dictionary أو Figma Tokens.
أكثر من 30 إعدادًا مسبقًا منتقى
Sunset، Ocean، Aurora، Cyber، Royal، Neon Pink، Iris، Bullseye، Conic Wheel — انقر للتحميل والتعديل. كل إعداد مسبق نقطة بداية حقيقية بجودة إنتاج، لا مجرد اسم.
معاينة مباشرة + خصوصية بالتصميم
تُعرض المعاينة بـ background-image الأصلي، فما تراه هو بالضبط ما تُنتجه ورقة الأنماط لديك. كل بكسل يعمل محليًا — افتح DevTools ← Network وتحقق من غياب أي طلبات صادرة.
كيفية بناء تدرّج CSS
أربع خطوات من صفحة بيضاء إلى CSS أو Tailwind أو JSON جاهز للإنتاج.
-
1
اختر نوع التدرّج
الخطي للخلفيات والترويسات وأقسام الـHero. الشعاعي للأضواء الموجَّهة والـVignettes والأزرار المتوهّجة. المخروطي للرسوم الدائرية وعجلات الألوان والخلفيات الاصطناعية الرائجة. بدّل بينها عبر التبويبات — تُحفَظ نقاط ألوانك خلال التبديل.
-
2
ضع نقاط الألوان
انقر على عيّنة اللون لفتح المنتقي، أو الصق قيمة HEX مباشرةً في الحقل. اسحب الشريط لتعيين موضع النقطة من 0 إلى 100%. انقر + إضافة نقطة لإدراج نقطة جديدة في أكبر فجوة (بلون منتصف). حتى 12 نقطة إجمالًا.
-
3
اضبط الهندسة + الاستيفاء
للخطي: حدّد الزاوية (0° للأعلى، 90° لليمين). للشعاعي: اختر الشكل وكلمة الحجم وموضع المركز. للمخروطي: حدّد زاوية البداية. بدّل استيفاء الألوان إلى OKLCH للحصول على نقاط متوسطة ناعمة بصريًا عبر التدرّجات متعددة الدرجات اللونية.
-
4
انسخ المخرج
ثلاث لوحات تُحدَّث مباشرةً: CSS (
background-image:...)، Tailwind v4 (bg-[...])، JSON (بشكل رمز تصميم). استخدم أيقونة النسخ على كل واحدة، أو اضغط تنزيل CSS لحفظ ملفgradient.cssجاهز للإسقاط في مشروع.
مصمَّم للمصممين والمطورين
أربعة سيناريوهات شائعة تتفوّق فيها أداة متصفحية تركّز على الخصوصية على فتح Figma + موقع تدرّجات منفصل.
تدرّجات أزرار وبطاقات متوافقة مع العلامة
ابنِ تدرّج علامة بثلاث نقاط مرة واحدة، انسخه كرمز تصميم بصيغة JSON، أسقطه في Style Dictionary / Figma Tokens. الآن كل زر وبطاقة على كل منصة يستخدم نفس التدرّج بالإحالة. حدّث في مكان واحد، فينتشر في كل مكان.
خلفيات مخروطية للرسوم البيانية ولوحات المعلومات
التدرّجات المخروطية الاصطناعية مثالية للرسوم الدائرية ومؤشرات التقدّم وحالات تلميع 'تحميل البيانات'. اختر النوع المخروطي، وحدّد زاوية البداية، وضع نقاطًا عند النسب المئوية الصحيحة — يطابق الحساب الزوايا من 0 إلى 360° مع المواضع المئوية بدقة.
خلفيات مخصصة للشرائح ومنشورات التواصل وصور Hero
ابنِ التدرّج، عيّن نسبة الأبعاد لتطابق هدفك (16:9 للشرائح، 1:1 لـ IG، 3:1 لترويسة X)، خذ لقطة شاشة للمعاينة. أو انسخ CSS إلى ملف HTML منفرد وخذ لقطة في متصفحك بحجم البكسل المضبوط الذي تحتاجه.
خصوصية 100% — يعمل في متصفحك
ألوانك وتدرّجاتك لا تغادر جهازك أبدًا. افتح DevTools ← Network وسترى صفر طلبات صادرة خلال أي عملية.
- تجميع سلسلة التدرّج، وتحويلها إلى CSS / Tailwind / JSON، والمعاينة المباشرة — كلّها تعمل كـ JavaScript على جهازك — بدون عرض من جانب الخادم، بدون أي API لطرف ثالث.
-
تستخدم المعاينة
background-imageالأصلي في CSS — فيتطابق التدرّج المعروض تمامًا مع ما ستنتجه ورقة أنماطك في متصفحات مستخدميك. - بدون تسجيل، وبدون قياس عن بُعد لقيم الألوان. نستخدم ملف تعريف ارتباط واحدًا لحالة موافقة الكوكيز وآخر لتفضيل اللغة.
أدلة ذات صلة
قراءات مختارة بعناية حول تدرّجات CSS واستيفاء OKLCH وأنظمة رموز التصميم.
-
OKLCH in CSS — A Practical Guide for 2026
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
-
WCAG 2.2 Contrast Ratios — How They're Calculated and What "AA" vs "AAA" Means
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
الأسئلة الشائعة
ما الفرق بين الخطي والشعاعي والمخروطي؟
الخطي يمزج على طول خط مستقيم بزاوية مختارة (0° = للأعلى، 90° = لليمين). الشعاعي يمزج من نقطة مركزية إلى الخارج — دائرة أو قطع ناقص، مع كلمات حجم مثل farthest-corner. المخروطي يدور حول نقطة مركزية — تجلس نقاط الألوان عند زوايا كعقارب الساعة. المخروطي رائع للرسوم الدائرية وقراءات المؤشرات وخلفيات color-wheel الاصطناعية.
متى ينبغي استخدام استيفاء OKLCH؟
عند الانتقال بين درجات لونية غير متشابهة — مثل أزرق → أصفر، أو أحمر → أخضر. الاستيفاء الافتراضي بـ sRGB يمر عبر نقطة وسطى رمادية موحلة؛ أما OKLCH (in oklch ضمن CSS Color Module 4) فيُبقي النقطة الوسطى نابضة لأنه يستوفي في فضاء موحَّد بصريًا. عند تدرّج بنقطتين بين درجات متشابهة يكون الفرق ضئيلًا. أما لتدرّجات متعددة النقاط أو واسعة المدى اللوني فإن OKLCH أفضل بفارق كبير.
ماذا يقدّم لي مخرج Tailwind v4؟
أداة بقيمة عشوائية يمكنك لصقها مباشرةً في JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. لا حاجة لتعديل tailwind.config.js؛ يعمل في أي مشروع Tailwind 4. وإن كنت تفضّل رموز ألوان مسماة، فانسخ CSS وحوّلها يدويًا.
هل ستعمل التدرّجات في المتصفحات الأقدم؟
التدرّجات الخطية والشعاعية مدعومة عالميًا منذ 2014. أما المخروطية فقد توفّرت في كل المتصفحات دائمة التحديث بحلول 2021. كلمة الاستيفاء in oklch مدعومة في Chrome 111+ وSafari 16.2+ وFirefox 113+. إن احتجت لدعم متصفحات أقدم، فاستخدم الاستيفاء الافتراضي بـ sRGB — الفارق البصري يهم أكثر للتدرّجات متعددة النقاط ذات القفزات اللونية.
هل يُرسَل أي شيء إلى خادمكم؟
لا. توليد سلسلة التدرّج، وتحويلها إلى CSS / Tailwind / JSON، والمعاينة المباشرة — كلّها تعمل بـ JavaScript على جهازك. افتح DevTools ← Network وسترى صفر طلبات صادرة خلال أي عملية. الصق ألوان العلامة التجارية والرموز الداخلية — لا شيء يغادر حاسوبك.