diff --git a/guide/english/css/linear-gradient/index.md b/guide/english/css/linear-gradient/index.md index 786e6f1e37..a5a29dfc38 100644 --- a/guide/english/css/linear-gradient/index.md +++ b/guide/english/css/linear-gradient/index.md @@ -2,88 +2,81 @@ title: Linear Gradient --- ## Linear Gradient - -This is a stub. Help our community expand it. - -This quick style guide will help ensure your pull request gets accepted. - - - -#### More Information: - - -In Linear Gradient, the colors flow in a single direction, i.e- From Left to Right, Top to Bottom, or any angle you choose. - -![A gradient with Two colour stops](https://cdn.discordapp.com/attachments/261391445074771978/371707961422118912/image.png) +You can use a CSS linear gradient to make colors transition or fade from one color to another. -**A Linear gradient with Two colour stops** - -### Syntax- -To create a linear gradient you must define atleast two colour stops.(They are the colours the transitions are created among).It is declared on either the **background** or **background-image** properties. - -``` +### Syntax +To create a linear gradient you must define at least two color stops.(They are the colors the transitions are created from). It is declared on either the `background` or `background-image` properties. +```css background: linear-gradient(direction, colour-stop1, colour-stop2, ...); ``` -**Note: If no direction is Specified, the transition is Top to Bottom by default** +Note: If no direction is specified, the transition is `top to bottom` by default -### Different Gradient transitions- +### Different Gradient transitions **Top to Bottom :** -``` +```css background: linear-gradient(red, yellow); ``` ![Top to Bottom](https://cdn.discordapp.com/attachments/261391445074771978/371702268803809301/image.png) **Left To Right :** - -To make it left to right, you add an additional parameter at the beginning of the linear-gradient() starting with the word **to** which indicates the direction: -``` +To make it left to right, you add an additional parameter at the beginning of the linear-gradient starting with the word `to` followed by the direction you want the transition to go. +```css background: linear-gradient(to right, red , yellow); ``` ![Left to Right](https://cdn.discordapp.com/attachments/261391445074771978/371702990161051648/image.png) **Diagonal Positions :** - -You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right. - -Here's a sample for a gradient starting at top-left- -``` +You can also transition a gradient diagonally by specifying the direction you want the transition to go, for example: `top left` or `bottom right`. +Here's a sample for a gradient starting at top-left +```css background: linear-gradient(to bottom right, red, yellow); ``` ![Top-left](https://cdn.discordapp.com/attachments/261391445074771978/371705382105776128/image.png) -### Using Angles to Specify Direction of the gradient- - +### Using Angles to Specify Direction of the gradient You can also use angles, to be more accurate in specifying the direction of the gradient: -``` +```css background: linear-gradient(angle, colour-stop1, colour-stop2); ``` The angle is specified as an angle between a horizontal line and the gradient line. - -``` +```css background: linear-gradient(90deg, red, yellow); ``` ![90 degrees](https://cdn.discordapp.com/attachments/261391445074771978/371710718698848256/image.png) -### Using more than two colours- -You're not limited to just two colours, you can use as many comma seperated colours as you want. -``` + +### Using more than two colors +You're not limited to just two colors, you can use as many comma separated colors as you want. +```css background: linear-gradient(red, yellow, green); ``` -![A gradient with 3 colour stops](https://cdn.discordapp.com/attachments/261391445074771978/371706534591201281/image.png) +![A gradient with 3 color stops](https://cdn.discordapp.com/attachments/261391445074771978/371706534591201281/image.png) -You can also use other colour syntaxes like RGB or hex codes to specify the colors. +You can also use other color units like RGB or hex codes to specify the colors. -### Hard colour stops- -You can not only use gradients to transition with fading colours, but you can also use it to change from one solid colour to another solid colour instantly +### Define where the colors will transition +Your gradient can transition wherever you want by giving your colors a value when you define the linear-gradient +```css +background: linear-gradient(to right,red 5px, yellow 25%, green 80%); ``` -background: linear-gradient(to right,red 15%, yellow 15%); +![transition location](https://media.discordapp.net/attachments/503920393355132940/503920497919131660/gradient.png) + +In this case, the transition from red to yellow will start at 5px and finish at 25% from the left, and the transition from yellow to green will start at 25% and finish at 80% from the left. + + +### Hard color stops +You can not only use gradients to transition with fading colors, but you can also use it to change from one solid color to another solid color instantly +```css +background: linear-gradient(to right,red 45%, yellow 45%); ``` -![Hard colour stops](https://cdn.discordapp.com/attachments/261391445074771978/371716730046775318/image.png) +![Hard color stops](https://cdn.discordapp.com/attachments/261391445074771978/371716730046775318/image.png) + +Here the transition from red to yellow will start at 45% and finish at 45%. -**More information-** [Linear-gradient on Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) +**More information:** [Linear-gradient on Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)