Home > Web > Tip: CSS gradients

Tip: CSS gradients


Gradients in CSS are actually a special image. Because multiple background images are possible, you can specify both an image and a gradient. Below is the entire CSS code for having gradients in all major browsers. For your convenience, I encapsulated it into a Less function.

.gradient(@fromColor, @toColor, @additionalImage) {
	background-color: @fromColor;
	background-image: @additionalImage;
	background-image: @additionalImage, -moz-linear-gradient(90deg, @fromColor, @toColor);
	background-image: @additionalImage, -webkit-gradient(linear, 0% 0%, 0% 100%, from(@fromColor), to(@toColor));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@fromColor', endColorstr='@toColor');
}

Here I used top down gradient, but you can easily modify it. If the browser does not support CSS gradients, it will gracefully fallback to a plain color.

Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: