CSS3: Rounded Edges

.rounded-corners {
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    border-radius: 10px; /* CSS3 */
}

CSS3: Gradients

You can create awesome gradients using only CSS. Probably the best way to do this is using an online gradient editor like Colorzilla CSS Gradient Generator.

.gradient-button {
    background: #a7cfdf;
    background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a));
    background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%);
    background: -o-linear-gradient(top,  #a7cfdf 0%,#23538a 100%);
    background: -ms-linear-gradient(top,  #a7cfdf 0%,#23538a 100%);
    background: linear-gradient(top,  #a7cfdf 0%,#23538a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); 
}

CSS3: Text Shadows

It is easy to create Photoshop-like drop-shadows using CSS3.

h1.shadow {
	text-shadow: 0 1px 5px rgba(100, 100, 100, 0.95);
}

Text with Shadows

CSS3: Box Shadows

Apply Shadows to Boxes as well.

.box-shadow {
    -moz-box-shadow: 5px 5px 5px #000;
    -webkit-box-shadow: 5px 5px 5px #000;
    box-shadow: 5px 5px 5px #000;
}

CSS3: Combination of Effects

And now for a combination of all effects listed in this article!