الصورProcessado no seu navegador

مولد التدرج CSS

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

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

ترقية

النوع

linear

نقاط التوقف

3/8

التصدير

CSS + Tailwind

Mesh

Mesh مُفعّل

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

الألوان الأساسية

اللون 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%)]

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

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

#8C6A2D

0% · 100%

الموقع

الشفافية

#D3B06F

52% · 96%

الموقع

الشفافية

#2B1D08

100% · 100%

الموقع

الشفافية

الهندسة

النوع والاتجاه

النوع

الزاوية

135°

المركز والخيارات

المركز X

50%

المركز Y

50%

التكرار

إيقاع مفيد للفواصل والأنماط وخطوط المنتجات.

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

طبقة 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%); }

§ طريقة الاستخدام

كيفية إنشاء تدرج CSS بصريًا

أنشئ تدرجات خطية أو شعاعية أو مخروطية مع معاينة مباشرة وصادر CSS جاهز للصق.

اختر نوع التدرج
خطي (الأكثر شيوعًا، انتقالات اتجاهية)، شعاعي (من المركز للخارج)، أو مخروطي (قوس دائري — مثالي للرسوم البيانية).
حدد الألوان ونقاط التوقف
أضف لونين أو أكثر. اسحب لتغيير موضع كل نقطة توقف. الألوان بصيغة HEX أو RGB أو HSL.
اضبط الزاوية أو المركز
خطي: 0deg (عمودي)، 90deg (أفقي)، 45deg (قطري). شعاعي: حدد نقطة الأصل بالبكسل أو %.
انسخ CSS
الكود جاهز للصق في ملف الأنماط، مع بوادئ -webkit/-moz لأقصى توافقية.