Cool Multi-Colored Blur Effect With Multiple Shadows Using CSS3

With CSS3 and HTML5 getting widespread and most of the browsers supporting their major features, you can code a lot of things right there and then, as opposed to having to have to fire up Photoshop or another image editing software and dump an image your page. This article will show you what you can do with CSS3 text shadows to achieve a nice multicolor shadowing and, just because I wanted to, give it a sorts of a blur effect.

However, if you are using IE, brother, you better check another browser – a not so unexpected note. IE9 does not support the text-shadow property so, you are out of luck here, and MS filters are not going to help you since you only can have one, that’s aside from the fact that they are pretty horrible.

Most of us are used to the idea of having just one shadow, with it’s regular horizontal and vertical offset and the size that determines our perspective on the space we see the object in. And that’s mostly how we would define our shadow, creating an embossed text, a bevel or a simple shadow effect. An example of that would be a CSS rule like this:

div#text
{
	color: #ffff00;
	text-shadow: 2px 2px 5px #000000;
	font-weight: bold;
	font-family: Georgia;
	font-size: 64px;
	width: 100%;
	padding: 64px;
}

that produces text on a page that looks like this:

Shadow Effect

Shadow Effect

Very nice, but you can achieve a lot more because you can specify multiple shadows on the same element. Perhaps not everyone knows that multiple text-shadow values can be specified for the same element. All you have to do is to separate them with a comma. For example,

text-shadow:
	0px 0px 5px #ffffff,
	5px 5px 5px #00ff00,
	10px 10px 10px #ffff00

The order you specify the shadows in is, of course, going to affect how your element looks on the page so, chances are – you are going to spend the next half hour playing around with it. The CSS style I picked produces an effect of a rainbow colorful shadow that blurs out. The principle is very simple – keep moving the shadow out, then in, and move it further (increase the size).

Here is the complete html example with css rules to give you an idea. Save the code into a file and start playing with it – you’ll find it very amusing!

Multiple-Shadows Producing Colorful Blur Effect

Multiple-Shadows Producing Colorful Blur Effect

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" rel="stylesheet">
html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}
div#container
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 300px;
	margin: -150px -400px;
	background: #000000;
}
div#text
{
	position: relative;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 64px;
	margin: -32px -400px;
	color: #008000;
	text-shadow:
		0px 0px 5px #ffffff,
		5px 5px 5px #00ff00,
		10px 10px 10px #ffff00,
		5px 15px 15px #ff0000,
		0px 20px 20px #ff00ff,
		-5px 15px 25px #0000ff,
		-10px 10px 30px #00ffff,
		-15px 5px 35px #00ff00,
		0px 0px 10px #ffffff;
	text-align: center;
	font-weight: bold;
	font-family: Georgia;
	font-size: 64px;
}
</style>
</head>
<body>
	<div id="container">
		<div id="text">
			multiple shadows
		</div>
	</div>
</body>
</html>
Share on Tumblr
8ec2a2b92ddc863f7b5d022b88e4677a
Submit to redditShare on MyspaceShare via emailPin It
This entry was posted in CSS and tagged , , , , , , , , , . Bookmark the permalink.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...