CSS linear-gradient() 函数

定义和用法

CSS linear-gradient() 函数用于创建作为背景的线性渐变。

要创建线性渐变，必须定义至少两个色标。色标是您希望在其间实现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

লাইনার গ্রেডিয়েন্ট উদাহরণ:

প্রতিমান

উদাহরণ 1

এই লাইনার গ্রেডিয়েন্ট শীর্ষ থেকে শুরু করে। এটি লাল থেকে সোনালী, এবং পরে নীলে পরিবর্তিত হয়:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 2

একটি ডানদিকের থেকে শুরু করা লাইনার গ্রেডিয়েন্ট। এটি লাল থেকে নীলে পরিবর্তিত হয়:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 3

একটি ডানদিকের উপর থেকে শুরু করা (এবং ডানদিকের নিচের কোণে প্রসারিত) লাইনার গ্রেডিয়েন্ট:

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 4

একটি নির্দিষ্ট করা হওয়া আঙশ লাইনার গ্রেডিয়েন্ট:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 5

একটি বহুবিন্যাসসমূহ সামিল লাইনার গ্রেডিয়েন্ট:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

স্বয়ং প্রয়াস করুন

উদাহরণ 6

দুইটি স্থানের রঙগুলোর সমতল গ্রেডেন্ট:

#grad {
  background: linear-gradient(
    to right,
    লাল 17%,
    সবুজ 17% 34%,
    সোনালী 34% 51%,
    সবুজ 51% 68%,
    নীল 68% 84%,
    নীল 84%
  );
}

স্বয়ং প্রয়াস করুন

উদাহরণ 7

একটি স্পষ্টতা সহ লাইনার গ্রেডেন্ট:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

স্বয়ং প্রয়াস করুন

CSS য়াকৃতি

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

প্রযুক্তিগত বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা হল এই ফাংশনটির পূর্ণ সমর্থনকারী প্রথম ব্রাউজারের সংস্করণ

সংশ্লিষ্ট পাতা

শিক্ষাক্রম:CSS ƒাদল

সূত্র:CSS background-image প্রোপার্টি

সূত্র:CSS conic-gradient() ƒাংশ

সূত্র:CSS radial-gradient() ƒাংশ

সূত্র:CSS repeating-conic-gradient() ƒাংশ

সূত্র:CSS repeating-linear-gradient() ƒাংশ

সূত্র:CSS repeating-radial-gradient() ফাংশন