مولّد تدرجات لونية
ابنِ تدرجًا خطيًا أو دائريًا وتحكم في النقاط والاتجاه ثم انسخ CSS أو نزّل صورة.
°
الألوان
اسحب علامة على الشريط لتحريك لون، أو اضغط على الشريط لإضافة لون في ذلك الموضع.
%
%
%
%
النتيجة
اختر لونين لترى التدرج.
طريقة الاستخدام
- اختر خطيًا أو دائريًا أو مخروطيًا وحدد الزاوية.
- اختر الألوان. اسحب العلامات على الشريط لتحريكها، أو اضغط على الشريط لإضافة لون.
- انسخ CSS أو نزّل صورة PNG بمقاس 1920 × 1080.
أمثلة
- من الأسود إلى الأبيضخطي، 90°، من #000000 إلى #FFFFFF linear-gradient(90deg, #000000 0%, #ffffff 100%)
- ثلاثة ألوانمخروطي من 45°، أحمر ثم أزرق عند 50% ثم أخضر conic-gradient(from 45deg, #ff0000 0%, #0000ff 50%, #00ff00 100%)
تفاصيل الأداة والخصوصية
اصنع تدرج CSS خطيًا أو دائريًا أو مخروطيًا بما يصل إلى أربعة ألوان، وشاهده مباشرة، ثم انسخ CSS أو نزّل صورة PNG.
ترى التدرج أثناء تعديله، فيكون CSS الذي تنسخه هو ما رأيته.
الخيارات
- من لونين إلى أربعة، لكل لون موضع من 0% إلى 100%. والزاوية من 0 إلى 360 درجة.
الحدود
- تنزيل PNG للتدرج المخروطي يحتاج متصفحًا حديثًا.
- الألوان مصمتة، ولا تُضبط الشفافية هنا.
الخصوصية
ما تكتبه يبقى في متصفحك. لا يُرفع شيء ولا يُحفظ على الخادم.
أسئلة
ما CSS للتدرج الخطي 90° من الأسود إلى الأبيض؟
linear-gradient(90deg, #000000 0%, #ffffff 100%).
هل أستطيع تنزيل صورة؟
نعم، صورة PNG بمقاس 1920 × 1080 للتدرج نفسه.
كم لونًا أستخدم؟
حتى أربعة.
هل يُرفع شيء؟
لا.