الأدوات · CSS · مولّد تدرّج CSS
مولّد تدرّج CSS
أنشئ تدرّج CSS خطيًا أو شعاعيًا أو مخروطيًا وانسخ الكود.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اختر خطيًا أو شعاعيًا أو مخروطيًا، واضبط الزاوية أو الموضع.
أضف أو احذف التوقفات اللونية (من 2 إلى 8)، ثم استخدم أشرطة التمرير لضبط موضع كل توقف وعتامته.
انسخ كود CSS الناتج.
أسئلة شائعة
الخطي والشعاعي والمخروطي، ولكل منها حتى 8 توقفات لونية.
نعم، زر النسخ يضع نص التدرّج كاملًا في الحافظة، جاهزًا للّصق.
نعم، حيث تدعم دالة oklch() في متصفحك - يُكتشف ذلك تلقائيًا ولا يُعرَض الخيار إلا عندما يعمل فعليًا.
لا. لا يوجد أي ملف لرفعه هنا أصلًا - يُولَّد التدرّج ويُعرَض بالكامل داخل متصفحك.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Hand-Writing a CSS Gradient Rarely Looks Like What You Pictured
linear-gradient(135deg, #ff7a59, #ffd166) tells you nothing about what it looks like until it renders. Here's why gradient syntax is genuinely hard to picture in your head, and what actually helps.
اقرأ الدليلHow to Build a Radial Gradient in CSS Without Guessing Positions
Radial gradients spread color out from a point instead of across a line - useful for spotlight effects, glows, and vignettes. Here's how to build one and actually control where it centers.
اقرأ الدليلWhat a CSS Gradient Fallback Color Actually Does (and Why It's There)
Every copied gradient comes with a plain background: #hex; line above the gradient itself. Here's what it's actually protecting against, and why it's still worth keeping even on a modern site.
اقرأ الدليل
التعليقات