Ir para o conteúdo principal
الصور

مولد التدرج CSS

أنشئ تدرجات خطية وشعاعية ومخروطية بشكل مرئي وقم بتصديرها بتنسيق CSS أو Tailwind على الفور.

0 من 3 استخدامات اليوم · 3 متبقية. ترقّى إلى Pro وأزل الحد.

ترقية

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

تدرّج CSSخطي ودائري ومخروطيالمعالجة على الجهاز

حدّد الاتجاه، وزّع نقاط التوقف، وانشر تدرّجًا جاهزًا للإنتاج للمنتجات وصفحات الهبوط وأنظمة التصميم.

النوع
linear
نقاط التوقف
3/8
التصدير
CSS + Tailwind
Mesh
Mesh مُفعّل
01

المعاينة والكود

الألوان الأساسية
اللون 01
#8C6A2D
قاعدة بداية التدرّج.
اللون 02
#D3B06F
قاعدة نهاية التدرّج.
CSS
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Tailwind
bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]
02

نقاط التوقف والتكوين

نقاط التوقف اللونية
#8C6A2D
0% · 100%
الموقع
الشفافية
#D3B06F
52% · 96%
الموقع
الشفافية
#2B1D08
100% · 100%
الموقع
الشفافية
03

الهندسة

النوع والاتجاه
النوع
الزاوية
135°
المركز والخيارات
المركز X
50%
المركز Y
50%
التكرار
إيقاع مفيد للفواصل والأنماط وخطوط المنتجات.
04

المخرجات المتقدمة

طبقة Mesh
طبقة فوقية للأبطال البصريين والأسطح ذات العمق.
2 طبقات
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
حزمة Tokens
CSV يحتوي Hero و Surface و Accent جاهزة للتنفيذ.
:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }
Sobre

ما هو مولّد تدرّجات CSS؟

Por Quorify EditorialAtualizado em

يتيح لك مولّد تدرّجات CSS من Quorify إنشاء تدرّجات خطية ودائرية ومخروطية بصريًا وتصديرها كـ CSS أو Tailwind فورًا. تتم المعالجة محليًا في متصفحك عبر Canvas API وصيغ موحّدة—مفيد عند التعامل مع صور حساسة (جواز سفر، عقد، لقطة شاشة داخلية) وتفضّل عدم رفعها إلى خادم خارجي. يدعم الصيغ الحديثة (JPEG, PNG, WebP, AVIF) وفق معايير ISO/IEC. جزء من حزمة أدوات الصور في Quorify—ادمجها مع أدوات الضغط والتحويل والتحرير البصري الأخرى. للمزيد عن معالجة البيانات، راجع سياسة الخصوصية.

Casos

متى تستخدمها

  1. تجهيز الصور قبل رفعها إلى موقع ويب أو منصة تجارة إلكترونية أو وسائل التواصل الاجتماعي.

  2. تسريع عمل التصميم الحر بمهام متكررة (تغيير الأحجام بالجملة، تحويل الصيغ).

  3. تحرير لقطات الشاشة للوثائق التقنية أو الدروس دون فتح برامج تحرير ثقيلة.

  4. إعداد المواد التسويقية—البانرات والمنشورات والصور المصغرة—بصيغ محسّنة.

  5. إنجاز المهام السريعة دون الحاجة لتثبيت Photoshop أو برامج مماثلة.

Método

كيف تعمل

يستخدم مولّد تدرّجات CSS واجهة Canvas API ومُرمّزات الصور الأصلية في المتصفح، التي تطبّق معايير ISO/IEC لـ JPEG و PNG و WebP و AVIF. المعالجة محلية—لا يتم إرسال الصورة إلى أي خادم خارجي. للتفاصيل الكاملة عن معالجة البيانات، راجع سياسة الخصوصية.

FAQ

الأسئلة الشائعة

هل يتم إرسال الصورة إلى خادم؟
لا. يعالج مولّد تدرّجات CSS الصور محليًا في متصفحك عبر Canvas API. للتفاصيل الكاملة عن معالجة البيانات، راجع سياسة الخصوصية.
ما الصيغ المدعومة؟
صيغ الويب الرئيسية (JPEG, PNG, WebP, AVIF). قد يختلف دعم الصيغ القديمة (BMP, TIFF) حسب المتصفح.
هل هناك حد للحجم؟
تعتمد المعالجة على ذاكرة المتصفح. الصور الكبيرة جدًا (أكثر من 50 ميجابايت) قد تُبطئ الصفحة. نوصي بالضغط مسبقًا عند الحاجة.
هل تُحفظ الجودة؟
التحويلات بدون فقدان تحفظ الجودة الكاملة. التحويلات مع الضغط (JPEG, WebP) تتبع المستوى المختار—هناك دائمًا مفاضلة بين الحجم والجودة.
هل تعمل على الجوال؟
نعم، على المتصفحات الحديثة. قد تُقيَّد الصور الكبيرة جدًا بذاكرة جهاز الجوال.
هل يمكنني معالجة عدة صور؟
بعض الأدوات تدعم المعالجة بالجملة. راجع واجهة الأداة المحددة للتأكد.
Fontes

المصادر الرسمية

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. معايير دوليةسلسلة ISO/IEC 14496/15444ISO/IEC JTC1 SC29

    مواصفات صيغ الصور والفيديو

    معايير دولية لترميز وتبادل الصور (JPEG, PNG, WebP, AVIF) والفيديو—المرجع المستخدم من قبل المتصفحات وبرامج التحرير.

    Consultar fonte oficial
  2. وثائق رسميةحديثةGoogle Web Dev

    أفضل ممارسات صور الويب

    توصيات Google حول تحسين الصور للويب—الصيغ الحديثة، التحميل الكسول، الأبعاد، والتأثير على Core Web Vitals.

    Consultar fonte oficial
  3. معيار صناعيExif 2.32CIPA · Camera & Imaging Products Association

    مواصفات Exif

    معيار البيانات الوصفية Exif (Exchangeable Image File Format) المستخدم من قبل الكاميرات الرقمية والهواتف الذكية لتخزين معلومات الالتقاط.

    Consultar fonte oficial

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

مموَّلQuorify · الخطة المجانية
Quorify Pro

استخدم Quorify بلا حدود

100 استخدام/يوم لجميع الأدوات الـ 125 · بدون إعلانات · سجلّ غير محدود

ابتداءً من$4.08/mo
عرض الخطط
Compartilhe
مموَّلQuorify · الخطة المجانية
Quorify Pro

استخدم Quorify بلا حدود

100 استخدام/يوم لجميع الأدوات الـ 125 · بدون إعلانات · سجلّ غير محدود

ابتداءً من$4.08/mo
عرض الخطط

ذات صلة

أدوات ذات صلة

toolLayout.related_description

Max

مزيل الخلفية بالذكاء الاصطناعي

الذكاء الاصطناعي الذي يقطع ويزيل الخلفية من أي صورة بشكل مثالي.

Pro

دفعة العلامة المائية

قم بتسريع تحميلات العقارات من خلال تطبيق العلامات المائية والشعارات والتراخيص لما يصل إلى 50 صورة في وقت واحد. الرمز البريدي للخارج.

Pro

محول الصور

قم بتغيير حجم الصور وتحويلها عالميًا دون فقدان الجودة.

Max

ضاغط الصور

قم بتقليل وزن صورك بشكل وحشي مع الحفاظ على الجودة البصرية.

Pro

ريسيزر الدقيق

اضبط عرض أو ارتفاع البكسل الدقيق لأي صورة.

Pro

حجم الصورة بالجملة

قم بتحويل وتغيير حجم العشرات من الصور في وقت واحد مباشرة في متصفحك بخصوصية 100٪.