الصورمجانًا · 3 مرات يوميًاتتم المعالجة في متصفحك

منشئ تدرجات CSS

أنشئ تدرجات خطية وشعاعية ومخروطية بصريًا وصدّرها بصيغة CSS أو Tailwind.

النوع

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