Pure css gradient

Question

Does anyone know how I could plot a gradient like in the image below with pure CSS.

It doesn't have to work in IE. I can get it to work but I can't seem to be able to taper off the gradient on both sides left and right like the image shows. Any ideas would be grateful. Again this is using straight css to do this.

Gradient example

score 4 · Answer 1 · answered Oct 08 '12 at 16:01

This website is amazing for doing CSS gradients:

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

You can even import an image or CSS.

An example would be:

background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Thanks Rick but as I said in my post I was able to achieve the gradient what I wasn't able to do is have both sides, the left and right sides that is taper off. — Chapsterj, Oct 08 '12 at 16:08

score 2 · Answer 2 · answered Oct 08 '12 at 16:23

2

Why do you need gradient for this? How about drop shadows.

Examples

answered Oct 08 '12 at 16:23

Jawad

8,352
10
40
45

score 2 · Answer 3 · answered Oct 08 '12 at 21:03

That is a very complex task. They position one div behind the front one. The one behind is where they create the shadow, then they transform it and position it to achieve that effect. Here is a guide guide to do this technique (has it on one corner, but you can tweak a bit and get that effect)... I am sure there are specific guides to achieve the exact effect you want to out there as well, but they seem to be escaping my search skills for the day.

http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow

score 0 · Answer 4 · answered Nov 20 '15 at 21:28

With pure CSS, you could use radial-gradient.

Suppose that you have a div to emulate that shadow, and it has 300px of width and 100px of height, then, you just could achieve the effect with:

background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;

Here is the example --> enter link description here

Pure css gradient

4 Answers4