5

I want to give linear and radial gradient to single control. Is it possible to combine this two.?

Chris Klepeis
  • 9,783
  • 16
  • 83
  • 149
priya
  • 65
  • 2
  • 4
  • no is not possible with css3 .Because in css3 you have to define what type the gradient you want to give like linear or radial. – sandeep Mar 11 '11 at 04:35
  • 1
    It is absolutely possible, defining multiple gradients for one background-image rule (comma separated) – Nedudi Feb 11 '14 at 22:25

4 Answers4

5

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

enjoycss

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%);
Nedudi
  • 5,639
  • 2
  • 42
  • 37
3

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.

garrettlynchirl
  • 790
  • 8
  • 23
Ashique Desai
  • 370
  • 1
  • 2
  • 9
1

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+

Yoann
  • 4,937
  • 1
  • 29
  • 47
  • Really? Can’t you combine CSS gradients and [CSS multiple background images](http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css)? – Paul D. Waite Mar 17 '11 at 16:08
  • Of course you can, this is not correct. Just separate the gradients with a comma in the definition. – philw May 14 '15 at 08:19
  • Yeah @philw is right. You can totally use multiple gradients of all different types. They just all need to be within the same `background` prop in your css. – stwilz Jan 10 '19 at 23:02
  • Multiple background is IE 9+ and after pseudo element is IE 8+ my response is from 2011 and back then it's matters – Yoann Jan 11 '19 at 08:14
-1

-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

Jim
  • 1