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 Ceraso
Principal Product Designer
Eau Claire, Wisconsin

Version 2.1, January 2023

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;