psd-to-css-shadows.com

Convert Photoshop Drop Shadows to CSS3 Box & Text Shadows

Photoshop Drop Shadow Structure

R
G
B
%
°
px
%
px

CSS3 Syntax

No Yes
px
px
px
px

About

Adopted from the article, Recreating Photoshop Drop Shadows in CSS3 and Compass by Grady Kuhnlinem, this online tool uses javascript to convert the CSS3 box and text shadows from Photoshop shadow values.

Melanie Seifert
Senior Web Designer/Front-end Developer
Minneapolis, Minnesota

Version 2.0, October 2018

CSS3 Code

box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset;
text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity);
box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset;
text-shadow: offset-xpx offset-ypx blur-radiuspx rgba(0, 0, 0, opacity) inset;