مولّد التدرجات الشبكية

أنشئ خلفيات بتدرجات شبكية جميلة

مولّد التدرجات الشبكية

نقاط اللون

#F97316الموضع: 20%, 30%

#E11D48الموضع: 80%, 20%

#7C3AEDالموضع: 50%, 80%

#06B6D4الموضع: 10%, 70%

حجم اللوحة

CSS

background-color: #f97316;
background-image:
    radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
    radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);

ما هو مولّد التدرجات الشبكية؟

أنشئ تدرجات لونية شبكية مذهلة متعددة الألوان لخلفيات المواقع الإلكترونية ورسومات وسائل التواصل الاجتماعي وتصميمات الواجهات. خصّص عدد نقاط الألوان ومواقعها وألوانها لإنشاء تدرجات عضوية فريدة تتجاوز الأنماط الخطية أو الشعاعية البسيطة.

كيفية الاستخدام

اختر ألوانك الأساسية بالنقر على عينات الألوان أو إدخال قيم hex. أضف حتى 6 نقاط تحكم لونية.
اسحب نقاط التحكم على اللوحة لتحديد مواقعها وضبط تدفق التدرج حسب رغبتك.
انسخ كود CSS المُولّد أو قم بتنزيل التدرج كصورة PNG لاستخدامه في مشاريعك.

النتيجة

يُنشئ مصمم واجهات تدرجاً شبكياً من البنفسجي إلى التركواز بأربع نقاط تحكم لقسم البطل في صفحة هبوط، ثم ينسخ كود CSS ليلصقه مباشرة في ملف الأنماط.

مولّد التدرجات الشبكية