How do you make a gradient background in css?

Question

Is there any way to create a gradient background using nothing but CSS?

You can see an example of what I want to achieve on this website.

try this link: http://www.colorzilla.com/gradient-editor/.. You can create awesome gradient backgrounds without any hassle..! :) — casper123, Jan 31 '13 at 07:18
Colorzilla gradient editor is incredibly useful -- thanks for sharing, @casper123 :) — nkha, Sep 30 '14 at 18:59
**Warning: the top answer is a bit outdated—there's no need to use prefixes anymore. See [my answer](http://stackoverflow.com/a/34843103/3853934) for the most up-to-date solution.** — Michał Perłakowski, Sep 11 '16 at 17:57
I've recently created an app for generating pleasant-looking CSS gradients. I hope it will be useful for quickly discovering interesting gradient configurations. You can try it here: https://gradienteer.com/ — Alethes, Aug 12 '17 at 21:32
Check this handy [CSS gradient generator](https://www.magicpattern.design/tools/gradient-generator) for this kind of backgrounds. It supports linear, radial, and conic CSS gradients. — dmraptis, Nov 03 '21 at 09:09

score 28 · Accepted Answer · edited Mar 05 '17 at 15:18

28

Use this in your CSS:

background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);

See also:

edited Mar 05 '17 at 15:18

Quentin

914,110
126
1,211
1,335

answered Feb 24 '12 at 10:16

Ghost Answer

1,458
1
17
41

3

I'd place the first line last, since that is the "standard" version of the property. This way, if the browser supports the standard notation, it will be used, instead of the proprietary notation – PatrikAkerstrand Feb 24 '12 at 10:34
@PatrikAkerstrand: I thought exactly the same thing. – thirtydot Feb 24 '12 at 10:35
1

Note for future visitors: The `-ms-` prefix is not required; IE10 supports it without a prefix. You only need the `-ms-` prefix for the pre-release version of IE10 (and lets face it, no-one has used that since the full version of IE10 was released) – Spudley Aug 16 '13 at 10:47
1

This answer is outdated. Now you don't have to use prefixed versions in any major broswer, maybe except Android Browser <= 4.3. See [caniuse](http://caniuse.com/#feat=css-gradients). – Michał Perłakowski Jan 17 '16 at 19:47

score 5 · Answer 2 · edited Aug 15 '13 at 19:13

Simple and easy to make. Try this link

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%);

Michał Perłakowski · Answer 3 · 2018-05-26T15:16:02.920

Use background-image with linear-gradient() or radial-gradient().

.linear-gradient {
  background-image: linear-gradient(to bottom, #000077, #65A5FF);
}
.radial-gradient {
  background-image: radial-gradient(#000077, #65A5FF);
}
div {
  width: 100%;
  height: 200px;
}

<h1>Linear gradient</h1>
<div class="linear-gradient"></div>
<h1>Radial gradient</h1>
<div class="radial-gradient"></div>

According to caniuse.com, CSS gradients are supported by all major browsers. If you have to support IE <= 9, use plain-color or image background fallback. If you have to support Android Browser <= 4.3, also use prefixed version (-webkit-linear-gradient).

score 2 · Answer 4 · edited Jan 17 '16 at 19:51

2

.bckgrnd {
  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);
}

edited Jan 17 '16 at 19:51

Michał Perłakowski

88,409
26
156
177

answered Aug 16 '13 at 08:46

Jay Shukla

782
1
13
24

score 0 · Answer 5 · answered Sep 01 '20 at 16:50

0

background-image: linear-gradient(to bottom, #FFFFFF, #FAFAFA);

or

background: linear-gradient(#FFFFFF, #FAFAFA);

answered Sep 01 '20 at 16:50

Codemaker2015

12,190
6
97
81

score 0 · Answer 6 · answered Feb 24 '12 at 10:16

Try this website.

http://www.colorzilla.com/gradient-editor/

But there are also images and other things on this website, so if you want to copy the style, look how they have done it and try to implement it on your own ! There is also a website which has pretty neet background pattern's which, combined with gradients look absolutely rich and beautiful:

http://subtlepatterns.com/

A simple sample code for gradients which will be displayed in every browser:

background: rgb(243,226,199);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)));
background: -webkit-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );

score -3 · Answer 7 · answered Feb 24 '12 at 10:15

-3

Add two div tag and give background color link this

<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>

This is not exact syntax this is an idea that how u can do

answered Feb 24 '12 at 10:15

Mulesoft Developer

2,664
5
28
41

How do you make a gradient background in css?

7 Answers7

Linked

Related