Nowadays, web pages use CSS and CSS provides a lot of chances to make different things. Gradients and a pie done by using gradients are some example of them. CSS 3 has 5 gradient functions; linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient and conical gradient. Conical gradient is my favorite one, but I will explain one-by-one. In the end, I will make a pie using gradients. I hope it will be delicious. If you want, there are different generators to make gradients. But, if you want to produce it yourself, I tried to explain a lot of topics about gradient. I used 700px width and 300px height for all cases. Linear Gradient It is what you may find if you search gradient. This provides a transition between colors with the same interval. - : -gradient( -stop1, -stop2, -stop3, …); background image linear color color color - : linear-gradient( , yellow, , yellow); background image red blue Percentage and pixels can be used to define the position of colors. If the position of colors isn’t defined, they will be distributed with equal intervals. If the position of colors is defined, I showed them with turquoise color to help understand the position of colors easily, but you may neglect them. - : -gradient( -stop1 x%, -stop2 y%, -stop3 zpx, …); background image linear color color color - : linear-gradient( %, yellow %, px, yellow); background image red 20 70 blue 250 If any gradient isn’t wanted, this interval can be defined. For example, any gradient isn’t wanted at an interval between 50% and 70%. background-image: linear-gradient(red %, yellow %, yellow %, blue px, yellow); 20 50 70 250 background-image: linear-gradient(red %, yellow % %, blue px, yellow); 20 50 70 250 Also, two colors can be used without any gradient between them. - : linear-gradient( % yellow %, %, yellow); background image red 20 70 blue 70 Given values must be in increasing order. If not, colors will be placed in the same place. For example, if 70% is greater than 100px, blue will be placed at 70%. - : linear-gradient( %, yellow %, px, yellow); background image red 20 70 blue 100 The direction of the gradient can be defined. left, right, top and bottom with ‘to’ can be used to define the direction of the gradient. It is bottom as default. - : -gradient(direction, -stop1 X%, -stop2 Y%, -stop3 Zpx, …); background image linear color color color - : linear-gradient(to top, %, yellow %, px); background image red 20 40 blue 250 Also, their combination can be used. - : linear-gradient(to top left, yellow %, %, px); background image 20 red 40 blue 250 If you use the combination of them, the gradient will be placed diagonally. As you can see, colors are changing diagonally. Maybe, you may ask 80% of what or 250px from what. The next drawing shows how to use percentages or pixels. 0% or 0px define the starting point, and 100% or length of the red line define the ending point. Repeating Linear Gradient Its name is very descriptive. How is it repeating? - : repeating- -gradient( -stop1, -stop2, -stop3, …); background image linear color color color - : repeating-linear-gradient( , yellow, ); background image red blue As you can see, there is no difference between repeating linear gradient and linear gradient. Why? Because there is no defining point to repeat. For the last color or the first color, one value must be defined. - : repeating- -gradient( -stop1, -stop2, -stop3 of , ); background image linear color color color position last color - : repeating-linear-gradient( , yellow, px); background image red blue 90 Now, it will repeat one time for each 90px. Also, the percentage can be defined. - : repeating-linear-gradient( , yellow, %); background image red blue 40 More, if you want, you may define the starting point. If it is defined, the interval before this point will be filled. - : repeating-linear-gradient( %, yellow, %); background image red 10 blue 40 Again, the direction can be used. - : repeating-linear-gradient(to left top, , yellow, %); background image red blue 40 The previous schema is valid for repeating-linear-gradient. Radial Gradient Radial gradient provides a transition between colors that radiate from an origin. - : radial-gradient( -stop1, -stop2, -stop3, …); background image color color color - : radial-gradient( , yellow, ); background image red blue Similar to linear gradient, percentages and px can be used for colors. background- : -gradient(red %, yellow %, blue px, yellow); image radial 20 40 250 What is the problem? 250px used for the location of blue color, but the result is unexpected. Let me introduce two different shapes for radial gradient: circle and ellipse. If it isn’t defined, ellipse is default one. So, firstly let’s check how to use circle. Circle is a bit easier than ellipse. background- : -gradient( , red %, yellow %, blue px, yellow); image radial circle 20 40 250 Again, there is a problem, 20% of what? If wanted, this value can be defined directly with a pixel value. background- : -gradient( px, red %, yellow %, blue %, yellow); image radial circle 75 20 40 100 Now, reference length is 75px. %20 means 75px*20%= 15px. Any of closest-side, closest-corner, farthest-side and farthest-corner keywords can be used to define radius. If it isn’t defined, farthest-corner is the default one. So, 100% means the length of the reference length. background- : -gradient( closest-side, red %, yellow %, blue %, yellow); image radial circle 20 40 100 Schema shows these keywords. More, the position of the center of the radial gradient can be defined with ‘at’. The first value is for x position, and the second value is for y position of center. Also, center keyword can be used for both values. If they aren’t defined, ‘center’ is the default one. background- : -gradient( closest-side at px center, red %, yellow %, blue %, yellow); image radial circle 100 20 40 100 Let’s continue with ellipse. - : radial-gradient( closest-side 100px , red , yellow , blue , yellow); background image ellipse at center 20 % 40 % 100 % As you can see, two different values are used for x and y-axis as radius. But, what happens if any pixel value is used for the position of colors. background-image: radial-gradient(ellipse closest-side at px px, red %, yellow px, blue %, yellow); 100 150 20 75 100 I searched about that but I couldn’t find how it is calculated. I found some answers by trial and error. My experience says that ellipse is using x-direction(along width) as a reference axis. For example, the nearest sides are 100px away from center for x-direction and 150px for y-direction. If you want to use 75px as the position of color, it will be transformed to the percentage by using x-direction length. As a result, 75px/100px will be 75% and this new percentage will be used, 75%*150px=112.5px, for y-direction. This is a bit of detail. Let me know if I made a wrong conclusion, please. There is one more detail about farthest-corner, but I am skipping it because it is a very detailed point (I tried to explain it in the next lines). Repeating Radial Gradient This is similar to radial gradient. - : repeating-radial-gradient( -stop1, -stop2, -stop3, …); background image color color color - : repeating-radial-gradient( , yellow, ); background image red blue Again, there is no difference between repeating radial gradient and radial gradient if you don’t define the repeating interval. Let’s say it is 100px. - : repeating-radial-gradient( , yellow, px); background image red blue 100 Similar to repeating-linear-gradient, you may define the starting point. - : repeating-radial-gradient( px, yellow, px); background image red 20 blue 100 Now, it will repeat one time for each 80px by starting 20px, and the interval before 20px will be filled automatically. As I said before, farthest corner is the default one. Let me explain how to use 100px. Similar to nearest-side, the distance between center and corner along x and y-axis are found, and distance along x is used as a reference. Firstly, 100px/distance along x-axis is calculated. Then, the found value is multiplied by the value of distance along the y-axis. I am not explaining repeating radial gradient so much, because other properties are the same with radial gradient. Conic Gradient I am trying to use it for the first time. So, this article is beneficial to me. I hope it will be beneficial for you, too. - : conic-gradient( -stop1, -stop2, -stop3, …); background image color color color - : conic-gradient( , yellow, ); background image red blue As you can see, colors are changing around a point. Now, can you use a pixel to define the position of colors? No. So, what do you use for it? Percentages and any angle(rad, grad, deg, turn,) can be used. - : conic-gradient( -stop1, -stop2 xdeg, -stop3 y%, …); background image color color color background-image: conic-gradient(red turn, yellow deg, blue %, magenta rad, orange grad); .25 120 50 5 400 More, the position of the center can be changed. top, bottom, left, right and center keywords or pixels or percentages can be used with ‘at’. background-image: conic-gradient(at px top, red turn, yellow deg, blue %); 100 .25 120 90 background-image: conic-gradient(at left %, red turn, yellow deg, blue %); 25 .25 120 90 background-image: conic-gradient( , turn, yellow deg, blue %); at left top red .25 120 90 As you notice, they start from the same point. Can you change it? Yes. background-image: conic-gradient( deg, red turn, yellow deg, blue %); from 90 .25 120 90 So, 90deg is the new starting point. Repeating Conic Gradient It is similar to conic gradient but interval must be defined with the last color, the first color, or both. - : repeating-conic-gradient( deg, yellow deg, turn); background image red 90 270 blue .9 Other properties used for conic gradient can be used for repeating conic gradient. background-image: repeating-conic-gradient( deg at px center, red deg, yellow deg, blue turn); from 45 50 90 270 .9 Before pie, I want to give some information about how to use a gradient for borders Gradient For Borders You may use any gradient for borders. : 75 ; : ( 45 50 , 90 , 270 , ); : 75; border px solid border-image repeating-conic-gradient from deg at px center red deg yellow deg blue .9turn border-image-slice Solid doesn’t make any difference, but if you don’t define any property it won’t work. The important point is the value of width of the border must be same as the value of border-image-slice. If they will be different values, it causes some distortion. So, the same values work very well. Gradient For Texts All gradients can be used for texts. : ( 45 50 , 90 , 270 , 0 ); : ; : ; : ; background-image repeating-conic-gradient from deg at px center red deg yellow deg blue .9turn color transparent -webkit- background-clip text background-clip text FINAL: PIE I said that I will do a pie, then I gave a lot of information about gradients. But, my pie is very basic. Bon appétit! I hope you will like it. If I have any mistake, let me know it, please… I will share all codes at https://github.com/ozovalihasan/gradient-Pie

ORANGE

Yellow

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Let’s Make a Pie By Using CSS Gradients

Too Long; Didn't Read

Companies Mentioned

ozovalihasan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Let’s Make a Pie By Using CSS Gradients

Too Long; Didn't Read

Companies Mentioned

ozovalihasan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES