Multiple backgrounds without using images

Question

Is it possible to use multiple backgrounds in CSS without using images?

In my case I would like a gradient for the top 20 or so pixels followed by white.

score 1 · Answer 1 · answered Jun 30 '14 at 21:22

See ColorZilla for a gradient generator - this is percentages, but the idea is right I think

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #ffffff 25%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(25%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#ffffff 25%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#ffffff 25%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#ffffff 25%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#ffffff 25%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

Thank you, I actually know about ColorZilla but thought you could only specify the positions in percentages? Can you use pixels instead of % if you do it by hand? — Juicy, Jun 30 '14 at 21:27
@Juicy: It works for me in Chrome, but this answer may give you what you want in the generic case: http://stackoverflow.com/a/8861026/446747 — josh.trow, Jul 01 '14 at 05:44

score 1 · Accepted Answer · answered Jun 30 '14 at 21:47

For an actual gradient, you can use

background: #113;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#113), color-stop(20px,#fff));
background: -webkit-linear-gradient(top, #113 0%,#fff 20px);
background: linear-gradient(to bottom, #113 0%,#fff 20px);
background: -moz-linear-gradient(top, #113 0%, #fff 20px);
background: -ms-linear-gradient(top, #113 0%,#fff 20px);
background: -o-linear-gradient(top, #113 0%,#fff 20px);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#113', endColorstr='#fff',GradientType=0 );

You could also use an inset box-shadow

background: #fff;
box-shadow: inset 0 20px 20px -10px #113;

This will also create a dark gradient of 20px from the top, going into white.

I sadly can't yet upload images, so I'll just tell you that the Gradient and the Box-Shadow DO differ slightly.

Multiple backgrounds without using images

2 Answers2