CSS Gradient Generator using angryTools

<h2>Once you know your Photoshop Gradient setting you can generate Gradient CSS using web based tools named <a href="http://angrytools.com/gradient/">angryTools</a></h2>

**Problem:** Why we need Gradient CSS?
**Reason 1:** <i>Using gradient CSS instead of large images will make the website light and speedy.</i>
**Reason 2:** <i>Using gradient images will not make your website viewport compatible, that means for larger screen your fixed-sized Gradient images will not be stretched to full width, this is very important for User Interface (UI).</i>

<h3>Step 1: Open Photoshop Gradient layer and memo the Gradient settings</h3>

<h4>a. Open Radial Gradient Image in Photoshop</h4>
![main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/146ba755-38de-f21f-3a11-063da0d4974e.png)

<h4>b. Open Gradient Overlay window</h4>
Right Click on the Gradient layer right corner (fx->Indicates layer effects) and select "Gradient Overlay". The following Layer Style window will open. 

![photoshop1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/9f55fc16-bc0e-fc1c-69fe-a4de635ddbd8.png)

<i>Note: As we can see from the above image that the gradient style is "Radial" we now know that our Gradient style will be Radial.</i>

<h4>c. Check the Gradient Overlay Settings</h4>
Click on the Gradient to check the Radial Gradient settings. Then, Gradient Editor dialogue window will open. Now we can check the Gradient Stops Color, Color values and Color Stop Positions from this windows.

![photoshop2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/c8349be5-95b4-da10-de59-0d5fa895bd82.png)

<h4>d. Gradient Overlay Settings: Left Color Stop setting： Color value: #026eb9</h4>
Click on Left Color Stops and Click on "Color" then Color Picker window will open, now we can see that the Left Color Stop Color Value is #026eb9.

![photoshop3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/b3f8b9ef-1645-46ee-9590-09d3bd552232.png)

<h4>e. Gradient Overlay Settings: Color Mid point: 50%</h4>
Click on the Color Mid point Rhombus icon(◇) from the Gradient Editor window, then it will show the location of the Gradient between the Colors. For our example, the location is set to 50% according to the design.

![photoshop4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/d00c36ac-84aa-8811-a055-c105d84b1080.png)

<h4>f. Gradient Overlay Settings: Right Color Stop setting： Color value: #014f87</h4>
Click on Right Color Stops and Click on "Color" then Color Picker window will open, now we can see that the Left Color Stop Color Value is #014f87. (Same as the Step 1.d)

![photoshop5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/6f2784d9-d81d-f0a5-8ab7-bff6fe3b919c.png)

**Now we have the following Gradient color settings for the above example.**
`Gradient style : Radial`
`Left Color value: #026eb9`
`Gradient Color Mid point: 50%`
`Right Color value: #014f87`

<i>Note: Using the above Gradient settings we will generate the Gradient CSS using <a href="http://angrytools.com/gradient/">angryTool</a>. If your design has more gradient Stop Settings you can take memos for those Color Stops. It is possible to add multiples complexed Gradient Settings by adding Gradient from the tools described below</i>

<h2>Step 2: Generate Gradient CSS using angryTools <a href="http://angrytools.com/gradient/">http://angrytools.com/gradient/</a></h2>

<h4>a. Change Gradient Orientation to Radial</h4>
The default Gradient Orientation is "Linear". So, we need to change the Orientation to "Radial" as described in the following image.

![angry2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/5271c722-8c7c-2de6-f9df-3bf40c8ce2ef.png)

<h4>b. Set Left Stop Color: #026eb9</h4>
Now we can set our Left Stop Color by clicking on the Left Stop Color indicated in the following image. And, set the Left Stop color to #026eb9.

![angry3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/0d6f2e40-5eb0-1d41-9e43-da277a09f886.png)

<h4>c. Set Right stop Color: #014f87 and the <a href="http://angrytools.com/gradient/?0_026eb9,100_014f87&0_100,100_100&r_45">CSS</a> will be generated in the CSS box</h4>
We can set our Right Stop Color by clicking on the Right Stop Color indicated in the following image. And, set the Right Stop color to #014f87. 

![angry4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/b7d54e6c-67a5-e013-8220-c6d67200680e.png)

<i>Note: We don't need to change the Location of the Gradient which is (50%) because by default the gradient location is set to 50% (center). </i>

<h4>d. Copy the CSS</h4>
You can now copy the generated CSS from the "CSS-hex" or "CSS-rgba" window to your CSS. The CSS is given below. You can access the CSS also from here <a href="http://angrytools.com/gradient/?0_026eb9,100_014f87&0_100,100_100&r_45">Generated CSS</a>

```CSS:CSS
background: -moz-radial-gradient(center, ellipse cover, #026eb9 0%, #014f87 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #026eb9), color-stop(100%, #014f87)); /* safari4+,chrome */
background: -webkit-radial-gradient(center, ellipse cover, #026eb9 0%, #014f87 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, #026eb9 0%, #014f87 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, #026eb9 0%, #014f87 100%); /* ie10+ */
background: radial-gradient(ellipse at center, #026eb9 0%, #014f87 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#026eb9', endColorstr='#014f87',GradientType=1 ); /* ie6-9 */
```
-------------------------------------------------------------------------------------------------------------
<h3>Now, I would like to share how to generate linear style Gradient CSS:</h3>

<h3>Step 1: Open Photoshop Gradient layer and memo the Gradient settings</h3>

<h4>a. Open Linear Gradient Image in Photoshop</h4>
![main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/6d79ad4a-15a0-e0a1-f9da-8cf328ed6166.png)

<h4>b. Linear Gradient Color Settings in Photoshop</h4>
![photoshop1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/50f2adb2-5890-cbc8-7a38-dc39631641d3.png)

<i>From the Photoshop we can memo the following Gradient settings as explained for the example 1 (Radial Gradient):</i>

`Gradient style : Linear`
`Left Color value: #fe61a0`
`Left Color Starting Point: 20%`
`Gradient Color Mid point: 50%`
`Right Color value: #f20981`

<h4> Step 2: Apply the above Linear Gradient settings to generate the <a href="http://angrytools.com/gradient/?20_fe61a0,100_f20981&0_100,100_100&l_90">CSS</a></h4>

<h4>a. Left Color Stop Settings is given below</h4>
![angry1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/48c72cbd-2f53-7bd7-ee97-97df4d6fc548.png)

<h4>b. Right Color Stop Settings is given below</h4>
![angry2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/193e54ae-5ded-98fe-50b4-23c83fab6ae7.png)

<h4>c. Copy the CSS</h4>
The following <a href="http://angrytools.com/gradient/?20_fe61a0,100_f20981&0_100,100_100&l_90">CSS</a> will be generated. Now, You can copy and paste it to your CSS.

```CSS:CSS
background: -moz-linear-gradient(90deg, #fe61a0 0%, #fe61a0 20%, #f20981 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f20981), color-stop(80%, #fe61a0), color-stop(100%, #fe61a0)); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, #fe61a0 0%, #fe61a0 20%, #f20981 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, #fe61a0 0%, #fe61a0 20%, #f20981 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, #fe61a0 0%, #fe61a0 20%, #f20981 100%); /* ie10+ */
background: linear-gradient(0deg, #fe61a0 0%, #fe61a0 20%, #f20981 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f20981', endColorstr='#fe61a0',GradientType=0 ); /* ie6-9 */
```