A challenge all web developers face is converting Photoshop documents into real, functioning web pages. Often this is a simple matter of measuring things and picking colors, but in the case of drop shadows recreating them in CSS3 can be challenging. For some reason I have yet to find a tool that will simply translate the settings from the Photoshop Layer Style Drop Shadow dialog into proper CSS3 — so I decided to create one in Compass. I created a Sass
@mixin that relies on Compass to easily create CSS3
box-shadows from the values found in Photoshop.
Photoshop Layer Style Drop Shadow Dialog
Above you can see the Drop Shadow dialog in Photoshop. There is an article online that does a great job of breaking down what each of the properties does. Once it’s understood how Photoshop uses the values it’s easy to translate those values into CSS3
- Blend Mode
- Blends the shadow color with the background. CSS does not offer a similar property; this makes it difficult to match the colors exactly. CSS approximates a blend mode of “Normal”, but Photoshop uses “Multiply” by default. Using black (
#000) will produce the same shadow in “Normal” and “Multiply”.
- Sets the opacity of the shadow. This is similar to using
rgba()is currently not supported in CSS3PIE for
- Controls the directions of the shadow. The Angle can be replicated using the
box-shadowand can be calculated with a little trigonometry.
- Controls the shadow offset in the direction of the Angle. This combines with the Angle for calculating the
- Determines the portion of the shadow (percentage of the Size) that is a solid color; the rest of the shadow is blurred. Spread is analogous to the
- Sets the radius of the shadow in pixels. In CSS3 the Size is the
- Contour & Noise:
box-shadowhas no equivalent values.
CSS3 Box Shadow
Now that we have a basic understanding of what Photoshop is doing, let’s look at the values that
box-shadow accepts and see how they compare.
- Moves the shadow on the x and y axis. These values are required and are always the first two length properties. These are calculated using the Angle and Distance in Photoshop.
- The radius of the blur in addition to the spread. A blur of 10px with a spread of 10px will result in a 20px shadow where the first 10 pixels (the spread) is solid and the last 10 pixels gradually fade out (the blur). This is always the third length value and is optional.
- Just like Photoshop, the spread is the portion of the shadow that is a solid color. Unlike Photoshop, spread is expressed in pixels instead of as a percentage of the total Size. A spread of 10px with a 0px blur will look similar to a 10px solid border. Spread is always the fourth length value and is optional.
- Sets the color of the shadow. If a blur is set the shadow will automatically be slightly transparent. The spread area of the shadow will appear in the color specified. To have the entire shadow, including spread, appear transparent use
Generating the CSS3 Values from the Photoshop Values
As mentioned before, although Photoshop and CSS3 represent the values differently, they are actually analogous to each other.
Calculating the Offsets
Photoshop uses Angle and Distance, which can be used to calculate the
<offset-y>. Imagine a right triangle where the
<offset-x> and the
<offset-y> formed the right angle. The Distance would be the hypotenuse and the Angle is the inner angle. There are online triangle calculators for this basic trigonometry. Again, the
<offset-x> are the opposite and adjacent sides, the Distance is the hypotenuse.
Using this basic understanding of triangles it becomes easy to calculate the offsets using the Photoshop Drop Shadow values. As the online triangle calculator linked above points out,
Sin(Θ) = Opposite / Hypotenuse. More importantly,
Opposite = Sin(Θ) * Hypotenuse. The same is true of the adjacent side:
Adjacent = Cos(Θ) * Hypotenuse. And if you’re remembering your trig properly — or looking at the cheat sheet — you know that only two values are needed to calculate any other two. Thankfully, basic trig functions were added to Compass in version 0.11.
For those who are still totally lost:
- Angle == Θ
- Distance == Hypotenuse;
Calculating the Blur and Spread
<spread-radius> are not quite as straightforward but are equally easy to calculate. In Photoshop, the Size attribute represents the total length of the shadow and the Spread represents the percentage of the shadow that is a solid color — the rest is blurred. In CSS the spread is added to the blur for the total shadow size. With this in mind,
<blur-radius> is equal to the Photoshop Size minus the
<spread-radius> and the
<spread-radius> equals the Photoshop Size multiplied by the Photoshop Spread percentage. Again, the code example above bears this out.
Below is a Sass
@mixin that takes values from Photoshop, converts them, and creates a CSS3
The code above relies on the Compass
@mixin to generate the correct CSS rules with all of the correct vendor prefixes.
It’s worth noting that two additional
@mixins are shown in the code above.
@mixin photoshop-inner-shadow is for Photoshops Inner Shadow Layer Style, which is analogous to the
inset value for
@mixin photoshop-text-shadow is for
text-shadow which is implemented in Photoshop as a Drop Shadow applied to a text layer. It’s also worth noting that CSS does not support a Spread on
Seeing It In Action
@mixin is quite simple. Assume that we want to recreate the above Photoshop image in CSS. This image was created with the default Blend Mode, Color and Opacity. The Angle is 120°, the Distance is 10px, the Spread is 50% and the Size is 10px. As the example below shows, all that is needed is to plug in the values as they appear in Photoshop into the
@mixin will automatically convert the values and create the corresponding CSS rules as shown in the example below. It is important to note that the Angle and Spread values should always be unitless while the Distance and Size values require px as the unit.