CODEWITHSUNDEEP
htmlcss
user1896653
user1896653

Reputation: 3327

How can I create this gradient using CSS3?

I've asked the question before one day. And someone give me a link too. But, I can't write the proper code. I need a CSS for this background image:

In this online generator, I've tried, but I can't generate the almost left pure/solid portion of white background color:

Can you please, help me for it. HTML Codes:

<div id="banner" class="outer">
   <div class="inner"></div>
</div>

CSS code:

.outer {
    width: 100%;
    float: left;
}
.inner {
    width: 978px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}
#banner {
    display: block;
    float: left;
    margin: 2px 0 0 0;
    padding: 12px 0 0 0;
    height: 290px;
    background: rgb(208,208,208); /* Old browsers */
background: -moz-linear-gradient(left, rgba(208,208,208,1) 0%, rgba(202,202,202,1) 1%, rgba(202,202,202,1) 2%, rgba(223,223,223,1) 9%, rgba(225,225,225,1) 12%, rgba(228,228,228,1) 13%, rgba(228,228,228,1) 53%, rgba(207,207,207,1) 65%, rgba(207,207,207,1) 68%, rgba(198,198,198,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,208,208,1)), color-stop(1%,rgba(202,202,202,1)), color-stop(2%,rgba(202,202,202,1)), color-stop(9%,rgba(223,223,223,1)), color-stop(12%,rgba(225,225,225,1)), color-stop(13%,rgba(228,228,228,1)), color-stop(53%,rgba(228,228,228,1)), color-stop(65%,rgba(207,207,207,1)), color-stop(68%,rgba(207,207,207,1)), color-stop(100%,rgba(198,198,198,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c6c6c6',GradientType=1 ); /* IE6-9 */
}

Upvotes: 2

Views: 714

Answers (2)

DACrosby
DACrosby

Reputation: 11430

This is pretty close to your image. It uses a radial gradient and an inset shadow.

http://jsfiddle.net/daCrosby/eZN6Y/

/* Inner Shadow */
-webkit-box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);

/* Gradient */
background: #ffffff;
background: -moz-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%, #cccccc 60%);
background: -webkit-gradient(radial, 40% 20%, 0px, 40% 20%, 100%, color-stop(25%,#ffffff), color-stop(600%,#cccccc));
background: -webkit-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%,#cccccc 60%);
background: -o-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%,#cccccc 60%);
background: -ms-radial-gradient(40% 20%, ellipse cover,  #ffffff 25%,#cccccc 60%);
background: radial-gradient(ellipse at 40% 20%,  #ffffff 25%,#cccccc 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );

Upvotes: 2

icktoofay
icktoofay

Reputation: 128991

That generator isn't working because that's not a single gradient; it's two. There's a horizontal gradient on the bottom and a vertical gradient atop that. You can use multiple backgrounds for that. This is what I came up with:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb);

As you can see, there's a comma between the linear gradients, which means to composite the first one atop the second one. You can also see I'm using rgba and transparent on the top one so parts show through to the bottom gradient.

Take a look.

Upvotes: 2

Related Questions