freeCodeCamp/guide/arabic/certifications/responsive-web-design/applied-visual-design/create-a-gradual-css-linear.../index.md

---
title: Create a Gradual CSS Linear Gradient
localeTitle: إنشاء تدرج خطي متدرج CSS
---
\## إنشاء تدرج خطي متدرج CSS

لإنشاء تدرج خطي ، يجب تحديد نقطتي توقف للألوان على الأقل. توقف اللون هي الألوان التي تريد تقديم انتقالات سلسة بين. يمكنك أيضًا ضبط نقطة بداية واتجاه (أو زاوية) مع تأثير التدرج.

الصيغة هي دائما:

 `background-image: linear-gradient(angle, color-stop1, color-stop2);
`

يمكن استخدام الألوان في تنسيقات hex () و rgb (). جرب قليلا وسوف تفهم كم هو سهل وجميل استخدامه.

## مصادر

[هناك معلومات شاملة حول هذا الموضوع متوفرة على هذا الرابط.](https://www.w3schools.com/css/css3_gradients.asp)

[قد ترغب أيضًا في مراجعة فيديو Youtube هذا بواسطة The Net Ninja.](https://www.youtube.com/watch?v=wTk4Wuckd0U)
fix(guide): Fix all frontmatter 2018-10-19 12:53:51 +00:00			`---`
			`title: Create a Gradual CSS Linear Gradient`
			`localeTitle: إنشاء تدرج خطي متدرج CSS`
feat: add portuguese chinese arabic to guide 2018-10-12 20:35:31 +00:00			`---`
			`\## إنشاء تدرج خطي متدرج CSS`

			`لإنشاء تدرج خطي ، يجب تحديد نقطتي توقف للألوان على الأقل. توقف اللون هي الألوان التي تريد تقديم انتقالات سلسة بين. يمكنك أيضًا ضبط نقطة بداية واتجاه (أو زاوية) مع تأثير التدرج.`

			`الصيغة هي دائما:`

fix(guide): Fix all frontmatter 2018-10-19 12:53:51 +00:00			`background-image: linear-gradient(angle, color-stop1, color-stop2);
			`
feat: add portuguese chinese arabic to guide 2018-10-12 20:35:31 +00:00
			`يمكن استخدام الألوان في تنسيقات hex () و rgb (). جرب قليلا وسوف تفهم كم هو سهل وجميل استخدامه.`

			`## مصادر`

			`[هناك معلومات شاملة حول هذا الموضوع متوفرة على هذا الرابط.](https://www.w3schools.com/css/css3_gradients.asp)`

			`[قد ترغب أيضًا في مراجعة فيديو Youtube هذا بواسطة The Net Ninja.](https://www.youtube.com/watch?v=wTk4Wuckd0U)`