00:00Assalamu alaikum
00:02So today we will see in our video
00:04What are the gradients in CSS
00:06If you have seen
00:08In the background of
00:10Website
00:12There is mixing of colors
00:14Often it is circular
00:16Often it is in a shape
00:18Often it is in a right side
00:20Often it is in a corner
00:22So all that happens through gradients
00:24So let us see the gradients
00:26How we
00:28How we can use gradients
00:30How we can use gradients
00:34We use our
00:36Background
00:38We use body tag
00:40We use body tag
00:42We give width to body
00:44We give width to body
00:46100 viewport width
00:48100 viewport height
00:50100 viewport height
00:52And we
00:54Background image
00:56Background image
00:58And we give
01:00Linear gradient
01:02Linear gradient
01:04Either in x axis or in y axis
01:06Either in x axis or in y axis
01:08In rows or columns
01:10Let us give it
01:12Red color
01:14And green color
01:16And green color
01:18Let us see in background
01:20As you can see
01:22As you can see
01:24It goes with full accurately
01:26It goes with full accuracy
01:28Then it gets green
01:30Then it gets green
01:32Like this we can
01:34Use many colors
01:36Use many colors
01:44We
01:46Can use many colors
01:48This bad practice
01:50Using multiple colors
01:52We should use minimum colors to give a professional look to our website
02:00So this was a simple way to use colors
02:03Now we are going from top to bottom
02:06But we want our eye to be from right to left
02:10From left to right
02:13So we will give an attribute to left
02:22We will give an attribute to left
02:29So we have a red start from green
02:34We call it top right
02:45So this green will be top right
02:50And this will be the start
02:55In the same way
03:00If we want it to be bottom right
03:05We can use it for bottom right
03:10So this is our linear gradient
03:13Other than this we have a radial gradient
03:18What does a radial gradient do?
03:20It makes a circular shape
03:23For example we will use red for green
03:28So it will make a circular gradient
03:34If we use yellow
03:41It will make a gradient like this
03:48Now if we want this circle to be a perfect circle
03:53For that we will use an attribute
03:58We will call it circle
04:05If we refresh it, we have an accurate circle
04:12In the same way we have a conic gradient
04:17conic gradient
04:29In this we can use
04:36For example
04:38We can make a curve here
04:40And call it a cross
04:43In the name of a curve
04:51For example a cross
04:52We can convert it
05:01500 pixels
05:04And we can give it a height
05:07500 pixels
05:10We will use it in the background
05:15conic gradient
05:24We will convert it into a circular shape
05:29We will convert it into a conic gradient
05:36We will give it a border radius
05:40We will give it a border radius of 50%
05:44So that it becomes a perfect circle
05:47We will add colors
05:51Perfect and green
05:54Now we have a conic gradient
05:57Now for example
05:59We want a perfect circle
06:01And in it
06:03Different diameters
06:05Different parts
06:07We want to convert it into 4 pieces
06:15For that we will define colors
06:18And we will tell from which angle it starts
06:22And we will tell from which angle it ends
06:28Red color starts from 0 degree
06:31And red color ends at 90 degree
06:34In the background
06:41Now we have a perfect circle
06:45Now we have a perfect circle
06:52Now we have a perfect circle
06:55Now we have a perfect circle
06:57Now we have a perfect circle
06:58Now we have a perfect circle
06:59Now we have a perfect circle
07:00Now we have a perfect circle
07:01Now we have a perfect circle
07:02Now we have a perfect circle
07:03Now we have a perfect circle
07:04Now we have a perfect circle
07:05Now we have a perfect circle
07:06Now we have a perfect circle
07:07Now we have a perfect circle
07:08Now we have a perfect circle
07:09Now we have a perfect circle
07:10Now we have a perfect circle
07:11Now we have a perfect circle
07:12Now we have a perfect circle
07:13Now we have a perfect circle
07:14Now we have a perfect circle
07:15Now we have a perfect circle
07:16Now we have a perfect circle
07:17Now we have a perfect circle
07:18Now we have a perfect circle
07:19Now we have a perfect circle
07:20Now we have a perfect circle
07:21Now we have a perfect circle
07:22Now we have a perfect circle
07:23Now we have a perfect circle
07:24Now we have a perfect circle
07:25Now we have a perfect circle
07:26Now we have a perfect circle
07:27Now we have a perfect circle
07:28Now we have a perfect circle
07:29Now we have a perfect circle
07:30Now we have a perfect circle
07:31Now we have a perfect circle
07:32Now we have a perfect circle
07:33Now we have a perfect circle
07:34Now we have a perfect circle
07:35Now we have a perfect circle
07:36Now we have a perfect circle
07:37Now we have a perfect circle
07:38Now we have a perfect circle
07:39Now we have a perfect circle
07:40Now we have a perfect circle
07:41Now we have a perfect circle
07:42Now we have a perfect circle
07:43Now we have a perfect circle
07:44Now we have a perfect circle
07:45Now we have a perfect circle
07:46Now we have a perfect circle
07:47Now we have a perfect circle
07:48Now we have a perfect circle
07:49Now we have a perfect circle
07:50Now we have a perfect circle
07:51Now we have a perfect circle
07:52Now we have a perfect circle
07:53Now we have a perfect circle
07:54Now we have a perfect circle
07:55Now we have a perfect circle
07:56Now we have a perfect circle
07:57Now we have a perfect circle
07:58Now we have a perfect circle
07:59Now we have a perfect circle
08:00Now we have a perfect circle
08:01Now we have a perfect circle
08:02Now we have a perfect circle
08:03Now we have a perfect circle
08:04Now we have a perfect circle
08:05Now we have a perfect circle
08:06Now we have a perfect circle
Comments