Css multiple gradient

Question

I want to style background of one element in CSS, something like this:

color gradient from top to bottom with no any transparency,
transparency gradient with single color from left to right: left and right with no transparency, and middle with 100% transparency
Second gradient should be on higher layer than first. Both placed on 100% of element's area

Code:

div.panel div.panel-heading
{
    background: linear-gradient(to bottom, #e8e8e8 0%,#dbdbdb 50%,#cdcdcd 51%,#e0e0e0 100%),
    /* Here I want have got second gradient, with transparency, on higher layer */;
}

Is this possible to do?

Yes, it is. But you need to show the code you tried and say what your problem is to get some help. — jfrej
– jfrej, Commented Sep 8, 2014 at 11:25
You can use gradient generator colorzilla.com/gradient-editor — Anon
– Anon, Commented Sep 8, 2014 at 11:26
This is not duplicate of that, I want not have got two gradient on different location of element, but in the same location — user3383675
– user3383675, Commented Sep 8, 2014 at 11:40

Anon · Accepted Answer · 2014-09-08 11:36:28Z

It is possible with :after and :before :

.gradient{
    height:400px;
    background: #61fc32;
    background: -moz-linear-gradient(left, #61fc32 0%, #f43034 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#61fc32), color-stop(100%,#f43034));
    background: -webkit-linear-gradient(left, #61fc32 0%,#f43034 100%);
    background: -o-linear-gradient(left, #61fc32 0%,#f43034 100%);
    background: -ms-linear-gradient(left, #61fc32 0%,#f43034 100%);
    background: linear-gradient(to right, #61fc32 0%,#f43034 100%);
    position:relative;
}
.gradient:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%, rgba(40,51,201,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(40,51,201,0)), color-stop(100%,rgba(40,51,201,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
    background: radial-gradient(ellipse at center, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
}

DEMO

Collectives™ on Stack Overflow

Css multiple gradient

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related