---
title: "Gradient and Radial Color in CSS"  
description: "Gradient and Radial Color in CSS"  
author: "Sumit Kesarwani"  
published: 2013-06-24  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1361/gradient-and-radial-color-in-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Gradient and Radial Color in CSS

\

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/cf226d3a-67f1-4e54-910c-4bc44d6c928e.png)

```
 .bubble{    width:300px;    height:50px;    background-color:Green;    background-image:   -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));    background-image:   -webkit-linear-gradient(top, Green, Yellow);    background-image:   -moz-linear-gradient(top, Green, Yellow);    background-image:   -ms-linear-gradient(top, Green, Yellow);    background-image:   -o-linear-gradient(top, Green, Yellow);    border-radius:10px;    -webkit-border-radius:10px;    -moz-border-radius:10px;}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/ae27a7f1-61a6-4420-98af-6dca7d135014.png)

```
 .square{    width:200px;    height:200px;    background-color:Blue;    background-image:   -webkit-gradient(linear, -45% 0%,0% 0%, from(Green), to(Yellow));    background-image:   -webkit-linear-gradient(-45deg, Green, Yellow);    background-image:   -moz--linear-gradient(-45deg, Green, Yellow);    background-image:   -ms-linear-gradient(-45deg, Green, Yellow);    background-image:   -o-linear-gradient(-45deg, Green, Yellow);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/22e673cc-84ae-4301-9618-745b48397e55.png)

```
 .radial-center{    width:100px;    height:100px;    background-color:Red;    background-position:center center;    background-repeat:no-repeat;    background:   -moz-radial-gradient(circle,black,red);    background:   -webkit-gradient(radial, center center, 0, center center, 200, from(black), to(red));    background:   -webkit-radial-gradient(circle,black,red);    background:   -ms-radial-gradient(circle,black,red);    background:   -o-radial-gradient(circle,black,red);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/3da1c905-539e-4814-a334-7f07abf302b3.png)

```
 .radial-closest{    width:200px;    height:200px;    background-color:#2F2727;    background-repeat:no-repeat;    background-image:   -webkit-radial-gradient(50px 50px,circle closest-side,#1a82f7, #2F2727);    background-image:   -moz-radial-gradient(50px 50px,circle closest-side,#1a82f7, #2F2727);    background-image:   -ms-radial-gradient(50px 50px, circle closest-side,#1a82f7, #2F2727);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/e645f6a2-d4cc-406e-bb12-02abe9bc4e30.png)

```
 .radial-closest-corner{    width:200px;    height:200px;    background-color:#2F2727;    background-repeat:no-repeat;    background-image:   -webkit-radial-gradient(50px 50px,circle closest-corner,#1a82f7, #2F2727);    background-image:   -moz-radial-gradient(50px 50px,circle closest-corner,#1a82f7, #2F2727);    background-image:   -ms-radial-gradient(50px 50px, circle closest-corner,#1a82f7, #2F2727);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/074c560d-36f0-4c05-bf3f-5cf886204715.png)

```
 .radial-farther-side{    width:200px;    height:200px;    background-color:#2F2727;    background-repeat:no-repeat;    background-image:   -webkit-radial-gradient(50px 50px,circle farthest-side,#1a82f7, #2F2727);    background-image:   -moz-radial-gradient(50px 50px,circle farthest-side,#1a82f7, #2F2727);    background-image:   -ms-radial-gradient(50px 50px, circle farthest-side,#1a82f7, #2F2727);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/8d5d481e-cf6e-4a23-a37e-1fce2d716efd.png)

```
 .radial-farther-corner{    width:200px;    height:200px;    background-color:#2F2727;    background-repeat:no-repeat;    background-image:   -webkit-radial-gradient(50px 50px,circle farthest-corner,#1a82f7, #2F2727);    background-image:   -moz-radial-gradient(50px 50px,circle farthest-corner,#1a82f7, #2F2727);    background-image:   -ms-radial-gradient(50px 50px, circle farthest-corner,#1a82f7, #2F2727);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/de590ec8-4ba7-49f3-821b-236647ce456c.png)

```
 .circle-radial{    width:100px;    height:100px;    border-radius:50px;    -webkit-border-radius:50px;    -moz-border-radius:50px;     background-color:#2F2727;    background-repeat:no-repeat;    background-image:   -webkit-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);    background-image:   -moz-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);    background-image:   -ms-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/3f78fa4b-1a34-481f-858c-d4ac548f202b.png)

```
 .circle-radial2{    width:100px;    height:100px;    border-radius:50px;    -webkit-border-radius:50px;    -moz-border-radius:50px;    background:   -ms-repeating-radial-gradient(30% 40%, red ,red 10px, black 10px, black 20px);}
```

![Gradient and Radial Color in CSS](https://www.mindstick.com/mindstickarticle/45c5c4fc-428e-4fb3-aaac-6b5344aa6aa1/images/d949907e-3ec3-47ed-9438-204926586386.png)

```
 .square-linear2{    width:100px;    height:100px;    background:   -ms-repeating-radial-gradient(red, red 10px, black 10px,black 20px);} 
```

---

Original Source: https://www.mindstick.com/articles/1361/gradient-and-radial-color-in-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.