Fading Corners using a Background Gradient

This is a very simple way to achieve the “fading corner” look with 2 small background images, the trick is setting it up right in your graphics editor.

There are only 2 images used in this example. A background gradient (repeated-x), and a background image for the top of the content container. The background image for the content is necessary in order to get the rounded corners. The reason this method works is because you can set the color of your page background gradient to fade into the color of your content container or wrapper.

Example:

Set Up

To get this to work, you have make sure your content container is the same distance from the top of your page in both your HTML and your Photoshop/Illustrator file, BEFORE you slice it up. Because you are placing an image on top of a gradient, you have to be accurate when you slice your photoshop file, or you will get a seam.

Download A working Example:

Download Includes: HTML, CSS, Images.

The HTML:

The CSS:

.fccontainer {
	height: 500px;
	width: 465px;
	text-align: center;
	background-image: url(../images/fading_bg_01.gif);
	background-repeat: repeat-x;
	background-position: center top;
	border: 1px solid #CCCCCC;
}
.fccontent {
	height: 300px;
	width: 350px;
	margin-top: 35px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	background-image: url(../images/fading_cap_07.gif);
	background-repeat: no-repeat;
	background-position: center top;
}

View the Live Example >

Related Posts:

1. CSS for Fading Corners
2. Web Design Trend: Fading Corners
3. How to use Vector Files in Web Design
4. 30 Free Fading Background Images
5. Free Fading Corner Images
6. Free Vector Web Page Elements - Part 3

12 Responses to “Fading Corners using a Background Gradient”

1. DW, on January 21st, 2007 at 11:12 pm

   Is it just me or does that link not work?

2. bittBox, on January 21st, 2007 at 11:55 pm

   Link fixed, appologies.

3. Dac, on April 12th, 2007 at 8:00 am

   The background image for the content is necessary in order to get the rounded corners.

   Eh… not necessarily anymore. This script is very useful if you’re looking for faster load time on an especially rounded page, or if you will be changing your design often. Why create pics every time?

   http://www.curvycorners.net/

4. AL, on May 1st, 2007 at 4:20 am

   Link broken please fix, thanks in advance.

5. df, on June 21st, 2007 at 10:20 am

   You could also use nifty corners, which uses javascript and css, but no images.

6. clr, on September 28th, 2007 at 3:25 am

   Problem… Work on multiple Div’s………..

7. Estetik, on January 22nd, 2008 at 6:33 pm

   nice

8. Lazer Kesim, on January 25th, 2008 at 2:26 pm

   thats really good

9. Emprenye, on January 29th, 2008 at 6:16 am

   nice work

10. Kanal Temizleme Araçlar?, on March 5th, 2008 at 5:38 am

    good post,thanks

11. Kanal Açma Araçlari, on March 5th, 2008 at 5:39 am

    http://www.berismakina.com/arasoz.html

12. Kanal Açma Araçlari, on March 5th, 2008 at 5:40 am

    http://www.berismakina.com/foseptik-temizleme.html
    http://www.berismakina.com/kanal-acma-araci.html

Leave a Reply