مولّد تدرجات وظلال CSS

أنشئ تدرجات وظلال صناديق مع معاينتها، ثم انسخ شيفرة CSS.

التدرج

النوع

الزاوية (0–360 درجة)

منزلق الزاوية

نقطة اللون 1

اللون (hex)

اختر لونًا

الموضع (%)

نقطة اللون 2

اللون (hex)

اختر لونًا

الموضع (%)

يمكنك استخدام من 2 إلى 5 نقاط، وتُخرَج مرتبة حسب الموضع من الأدنى إلى الأعلى.

طبقة الظل 1

إزاحة X (px)

إزاحة Y (px)

التمويه (px)

الانتشار (px)

اللون (hex)

اختر لونًا

التعتيم (%)

ظل داخلي (inset)

يمكنك استخدام حتى 4 طبقات ظل.

تتحدّث المعاينة وشيفرة CSS بمجرد تغيير قيمة. عندما يعجبك الناتج، اضغط على انسخ CSS والصقه في ورقة الأنماط الخاصة بك.

تقبل الألوان صيغة hex فقط بشكل #RGB أو #RGBA أو #RRGGBB أو #RRGGBBAA، ويمكن حذف # في البداية.
تُضبط الأرقام خارج النطاق على أقرب قيمة مسموحة. الزاوية 0–360، والموضع والتعتيم 0–100، والإزاحات والانتشار من -200 إلى 200، والتمويه 0–200.
تُستخدم الأرقام حتى منزلتين عشريتين.
التدرجات الشعاعية دائمًا دوائر تنتشر من المركز.

هل يُرسل مُدخلي إلى خادم؟

لا. يُحسب كل شيء داخل هذا المتصفح، ولا يُحفظ إدخالك ونتائجك ولا يُرفعان. تعيدك إعادة التحميل إلى القيم الابتدائية.

هل يغيّر تغيير ترتيب النقاط النتيجة؟

يُرتَّب CSS الناتج دائمًا من أدنى موضع. تحتفظ النقاط في الموضع نفسه بالترتيب الذي أدخلته.

كيف يُطبَّق التعتيم؟

إذا كان للون الظل قيمة ألفا في hex من 8 خانات، تُضرب في التعتيم (%) ويُخرَج بصيغة rgba(). وإذا لم يكن شفافًا، يُخرَج كـ hex من 6 خانات.