انتقل إلى المحتوى
🌈

مولّد gradient عشوائي

ولّد gradients CSS عشوائية — خطية، شعاعية، conic. تركيبات ألوان متناغمة، انسخ كود CSS جاهزاً. يعمل في متصفحك.

background: linear-gradient(45deg, #000, #fff);
bg-gradient-to-br from-[#000] to-[#fff]
السجل

كيف يعمل مولّد gradient؟

تختار هذه الأداة 2-3 ألوان باستخدام نظرية الألوان المتناغمة (علاقات تماثلية أو تكاملية أو ثلاثية) مع دورات HSL hue. تُختار الزوايا أو المواضع العشوائية بـ crypto.getRandomValues(). تُعرض المخرجات كمعاينة حيّة بجانب كود CSS جاهز.

أنواع gradient

  • خطي — تمتزج الألوان على طول خط مستقيم بزاوية قابلة للتكوين.
  • شعاعي — تشعّ الألوان للخارج من نقطة مركزية.
  • Conic — تدور الألوان حول مركز، مثل عجلة ألوان.

الاستخدامات الشائعة

  • أقسام Hero — خلفيات لافتة لصفحات الهبوط.
  • البطاقات والأزرار — لمسات UI حديثة بعمق.
  • إلهام التصميم — اكتشف تركيبات ألوان غير متوقعة.
  • خلفيات وbanners — ولّد أصولاً بصرية فريدة.

الخصوصية

تُولّد جميع gradients بنسبة 100% في متصفحك. لا تُرسل أي بيانات إلى أي خادم.