We help IT Professionals succeed at work.

How I Can Create Gradient and Curve Web Container without any image file

Last Modified: 2013-11-19
I need an Advanced Container like blue one in ASP.NET Official Website:

These containers has a gradient background in center and curve corners, Shadow under title and ...
It works WITHOUT any Images on all browsers

I know they use CSS and JavaScript for it, but how???
Watch Question

Jeffrey Dake Senior Director of Technology

That site acctually does use an image


The key to doing this better would be to break the image into smaller pieces so there wouldn't be as much bandwidth used.
Hi mkdotnet,

The examples you show there are done in FLASH. It really isn't a recommended solution to try and draw gradients with javascript. I have seen people attempt to do this and usually it only works in one browser type Mozilla or IE and not the other, as well as being slow and sometimes being so slow you get to watch the gradients being drawn.

The best solution I have found for this is to make a gradient image, then apply that as the background-image for the div, table, or whatever element you want the gradient on, set it to background-repeat: repeat-X, and then set the background-color to the last color at the bottom of the gradient.

So your gradient image only needs to be 1 pixel wide by however high you want the gradient (this makes for a small image size and quick download).

gradient-image starts with #ff0000 and ends with #000000;
<div style="background-image: url(/images/mygradient.jpg);background-repeat:repeat-x;background-color: #000000;">My content is in here with a gradient background</div>

If you wanted to make it customizable by the user, you could make multiple gradient images and swap the style information with javascript.

If you find a good, cross-browser, fast javascript gradient creator post it because I know people are looking for it. I just don't think it is Javascripts job to be drawing gradients.

you can make curved corners easily in most mozilla browsers with the non-standard css
         ... -left
         ... -topright
         ... etc

This won't work in IE though, so my own attempts to find a solution led me to NiftyCube:
which I actually couldn't get to work on my own systems, but know it can work as I've seen examples.

As for gradients, go with jrm213jrm213's solution of a small gradient image being repeated.



I found it UP TO NOW : CSS Gradient Shadow by Only Scripts :
Machine Learning Engineer
Unlock this solution and get a sample of our free trial.
(No credit card required)
Those both "seem" to work.

The dynamic drive one seems decent but it appears from reading the comments that people have varying results.

The osteele one the demo looks different in IE and Firefox, which isn't good if you want something that works cross browser... i guess technically it does work cross browser but the end result is different (it looks much nicer in firefox).

Is there a reason you don't want to use images?

Also, to Synthetics, I tried NiftyCube a while back and was never ever to get it working properly cross browser, and sometimes I couldn't get it working at all, so I gave up on it.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.