Quick Tip: RTLing the CSS3 "box-shadow" property

Here's a quick tip when RTLing one of the cool CSS3 properties: box-shadow.


The syntax of the box-shadow is as follows:

box-shadow: none | <shadow> [ , <shadow> ]*
= inset? && [ <length>{2,4} && <color>? ]


box-shadow: -5px -5px 5px 5px #888;

The first and second values define the horizontal and vertical offset of the shadow respectively, the other 2 values are for the blur and spread distances of the shadow and the last one is obviously for the color of the shadow.


When RTLing, what you need to focus on is the first value: the horizontal offset of the shadow. Multiply that by a -1 and you'll get the RTLed shadow.

So after RTLing, the previous example will be:

box-shadow: 5px -5px 5px 5px #888;

It's that simple!


The reason of that is because, according to the specification:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

So a positive horizontal offset value will offset the shadow to the left and a negative value will offset it to the right.

Happy RTLing =)

Average: 3.9 (11 votes)


Thanks a lot, I have developed the simple method to be automated by Regex:

======Regex Code========
======Regex Code========

Code Edit:
======Regex Code========
======Regex Code========

I really liked it. Keep sharing such excellent post like this in future too. Informative and good article. I like it very much. Have very interesting content to read out. Thanks dude http://www.munawartidung.com/

The "box shadow" looks nice, I'll try to use it on my webpage. Thank you! http://binaereoptionen.wordpressy.pl/

This is very good comment you shared.Thank you so much that for you shared those things with us.I am wishing you to carry on with your achievement.All the best..Thanks for sharing.

I really adore your commitment to offer your readers such valuable information. Looking forward to read such informative content over and over again...

Add new comment

Twitter Updates

Recent comments

Who's online

There are currently 0 users online.