CODEWITHSUNDEEP
htmlcsscss-transitions
user1184100
user1184100

Reputation: 6894

Gradient bottom color for a div

I wanted a gradient bottom color for a div.Something like as shown in below image.Is it possible in css3 or should a image be used.

Any help appriciated.

Upvotes: 1

Views: 1256

Answers (2)

Rob Audenaerde
Rob Audenaerde

Reputation: 20039

This will create a gradient only on the bottom of the element, and does not stretch with the height of the element. It is fixed 100px.

.style {
    padding-bottom:100px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: center bottom;
    background-size: 100px 100px;
    background-repeat: repeat-x;
}

Upvotes: 0

Martijn
Martijn

Reputation: 3754

Yes and No.

Yes, it's possible. Tools like http://www.colorzilla.com/gradient-editor/ make it easy to create the CSS3 code. For instance, this is kinda what you wanted: http://www.colorzilla.com/gradient-editor/#ffffff+75,cccccc+100;Custom

No, you should always have a fall-back image for gradients. Not all browsers support it, and not all support it equally well.

Upvotes: 4

Related Questions