is it possible to give linear and radial gradient for single background?

I want to give linear and radial gradient开发者_运维问答 to single control. Is it possible to combine this two.?

I use enjoycss for combined gradients and other complex css stuff

it automatically generate CSS,

you just play with controls, just like in photoshop

http://enjoycss.com/6y/2#background

here is generated code

background: -webkit-linear-gradient( -225deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -webkit-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: -moz-linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -moz-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);

Yes it is possible to put linear and radial gradients in a single background.

The trick is to reduce the opacity of these gradients! If they are opaque they will certainly not be seen because the gradient above it will block the view, as the images and gradients are stacked one over the other.

Code example for multiple gradients (Linear + Radial) under an image:

background: url('images/picture.png') no-repeat,linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.3)),radial-gradient(rgb(221, 221, 221), rgb(78, 78, 78));

In the above example the image is stacked on the top followed by the linear-gradient just below the image layer and the radial-gradient is the lowest layer.

Note that the linear-gradient layer is not fully opaque, because if it was opaque it would not show the layer below it which is the radial-gradient in this case.

You can't put two gradient on the same element. But if you use css gradient the browser must be css3 compatible. You can use the :before and :after pseudo class to have two differents css selector.

Try this :

div {
    position: relative;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(linear, 0 0, 0 500, from(rgba(220,30,50,1)), to(rgba(10,150,20,1)));
}
div:after {
    content : ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(radial, center center, 0, center center, 400, from(rgba(65,100,220,.5)), to(rgba(240,200,90,.5)));
}

EDIT :
Multiple background is IE 9+
And after pseudo element is IE 8+

-webkit is for Safari and Chrome. You need to use -moz for firefox. Here is a cool generator to help. http://westciv.com/tools/gradients/index-moz.html