مولِّد تدرجات CSS
خصوصية بالتصميم — يعمل بالكامل في متصفحك
ابنِ تدرجات CSS الخطية والشعاعية بصريًا داخل متصفحك. تتيح لك Toova وضع نقاط التوقف اللوني وضبط الزوايا وتبديل الأنواع وتصدير CSS جاهز للصق — كل ذلك دون رفع أي شيء إلى خادم.
التدرجات الخطية والشعاعية والمخروطية
التدرجات الخطية تتحرك على محور مستقيم محدد بزاوية أو كلمة اتجاه. التدرجات الشعاعية تتمدد من نقطة مركزية. التدرجات المخروطية تدور حول زاوية — مثالية لخلفيات بأسلوب مخطط الدائرة أو تأثيرات عجلة الألوان. تعرض Toova الثلاثة بعناصر تحكم بصرية لكي تبني التدرج الذي تريده دون حفظ كل متغير من صيغة CSS.
نقاط التوقف اللوني والتخفيف
اسحب نقاط توقف اللون على شريط التدرج للتحكم في مكان بداية كل لون ونهايته. أضف أكبر عدد تريده من نقاط التوقف — Toova لا تضع حدًا. استخدم إعدادات التخفيف المسبقة لإدخال تضمين غير خطي يتجنب المنتصف الرمادي الموحل الذي يُعيب التدرجات البسيطة ذات اللونين. مخرج CSS يستخدم خصائص قياسية مدعومة في كل متصفح حديث.
التوليد داخل المتصفح فقط
كل تدرج يُولَّد محليًا داخل متصفحك. الألوان التي تختارها ونقاط التوقف التي تضعها وCSS المخرج — لا شيء من ذلك يغادر الصفحة. قد يبدو ذلك مبالغًا للتدرجات، لكنه يعني أن الأداة سريعة وموثوقة وتعمل الصفحة دون اتصال بعد التحميل الأول. سيبقى تبويب الشبكة فارغًا أثناء الاستخدام.
الأسئلة الشائعة
- متى أستخدم التدرج المخروطي؟
- التدرجات المخروطية مثالية لتأثيرات مخطط الدائرة وعجلات الألوان والخلفيات التجريدية الدوارة. تدور حول نقطة مركزية، وهو شيء لا يستطيعه التدرج الخطي ولا الشعاعي. دعم المتصفحات الآن راسخ عبر المحركات الحديثة.
- كيف أتجنب المنتصف الموحل في تدرجات اللونين؟
- أضف نقطة توقف وسطى بلون متوازن إدراكيًا، أو اختر ألوانًا بإضاءة متشابهة. مزج الألوان التكميلية عبر نقطة وسطى RGB يُنتج رمادي — اختيار النقطة الوسطى يدويًا في OKLCH يتجنب ذلك.
- هل يمكنني التصدير إلى تنسيقات أخرى؟
- المخرج CSS قياسي يعمل مباشرةً في أي سياق ويب. لأدوات التصميم، انسخ نقاط التوقف الفردية وأعد إنشاء التدرج في Figma أو Sketch.
- هل يدعم الشفافية؟
- نعم. يمكن لأي نقطة توقف لونية أن تمتلك قناة alpha. مفيد للتلاشي عند الحواف في الخلفية أو طبقة التدرجات مع نقاط توقف شبه شفافة.
- هل تُرسَل بياناتي إلى أي مكان؟
- لا. يعمل التوليد داخل متصفحك بالكامل.