CSS3 gradient of a defined height?

**Scott Blanchard** · Mar 3, 2013 18:04

I'd like to convert a png based gradient to a pure CSS3 gradient. However, I can't determine if its possible to define the height of the gradient (without altering the height of the container element that the gradient is attached to.

For example, my current png based gradient is 300 pixels tall by 1px wide. I have it attached to the body and set to repeat horizontally. Can I emulate this with css3 gradients?

**Paul O'B** · Mar 4, 2013 04:06

Hi,

I find gradients awkward to work with but you can set the height if you set the colour stops in pixels and not percentages.

e.g.

This one stretches with the element.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
	float:left;
	width:200px;
	height:300px;
	margin:10px;
	border:1px solid #000;
	background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,183,234,1)), color-stop(73%, rgba(255,255,255,0.96)), color-stop(100%, rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* W3C */
}

.test2{height:100px}
.test3{height:500px}
.test4{height:400px}
</style>
</head>

<body>
<div class="test"> </div>
<div class="test test2"> </div>
<div class="test test3"> </div>
<div class="test test4"> </div>
</body>
</html>

If we change the colour stops to pixels then it stays at a fixed height.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
	float:left;
	width:200px;
	height:300px;
	margin:10px;
	border:1px solid #000;
	background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,183,234,1)), color-stop(100px, rgba(255,255,255,0.96)), color-stop(150px, rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* W3C */
}
.test2 { height:100px }
.test3 { height:500px }
.test4 { height:400px }
</style>
</head>

<body>
<div class="test"> </div>
<div class="test test2"> </div>
<div class="test test3"> </div>
<div class="test test4"> </div>
</body>
</html>

I used the gradient generator to produce the first section of code.

**dresden_phoenix** · Mar 4, 2013 12:14

Two ways around that.
1) As Paul said, you could construct a gradient using px instead of %s. the last color stop would then go on to fill the element in the direction of the gradient angle. Math
OR
2) Remember that a gradient is a UA generated bg IMAGE anyway

and use the background-size property in conjunction with background-color.

**Scott Blanchard** · Mar 10, 2013 12:08

Thanks very much for this guys. What would I need to do to get the transparent area to go from transparent at the top, down to pure white at 250px from the top, then white the rest of the way down the height of the element?

Tried several edits on the example css, but I couldn't quite get it to take.

**dresden_phoenix** · Mar 10, 2013 17:36

if you want transparency you will need rgba, am not sure but I dont thing there is another way around it.

Code:

background: -webkit-linear-gradient(top, rgba(0,255,255,0) 0, rgba(0,255,255,1) 250px, rgba(0,255,255,1));

You will also need to code SEPARATE background declarations for each vendor, it might also be good to BEGIN with a solid color declaration as a fallback.

User Tag List

Thread: CSS3 gradient of a defined height?

Thread Tools

Display

CSS3 gradient of a defined height?

Bookmarks

Bookmarks

Posting Permissions