تدرج CSS عبر الإنترنت - مولد وصانع وخلفية

Color

أداة التدرج CSS عبر الإنترنت

CSS Gradient هو موقع ويب صغير سعيد وأداة مجانية تتيح لك إنشاء خلفية متدرجة لمواقع الويب. 

تتيح لك تدرجات CSS عرض انتقالات سلسة بين لونين محددين أو أكثر.

تحدد CSS نوعين من التدرجات اللونية:

  • التدرجات الخطية (تنخفض / لأعلى / يسار / يمين / قطريًا)
  • التدرجات الشعاعية (محددة بمركزها)

التدرجات الخطية CSS

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

بناء الجملة

background-image: linear-gradient(directioncolor-stop1color-stop2, ...);

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle: