Photoshop projection and CSS Box-shadow conversion

Blend Mode: Photoshop offers a variety of blending modes, but CSS3 shadows only support normal mode.

Color: the shadow color. Corresponds to the value in the CSS3 shadow color .

Opacity (opacity): The opacity of the shadow. The value in the color that corresponds to the CSS3 shadow rgba() a .

Angle (Angle): The angle of the projection.

Distance (Distance): The distance of the shadow. The X-offset and Y-offet in the CSS3 shadow can be converted according to the angle and distance. x-offset = Distance * cos(180 -Angle),y-offset = Distance * sin(180 - Angle)

Extended (Spread): The extended size of the shadow. Controls how much of the shadow solid color and the bokeh color. Spread * Size = 阴影中实体颜色的大小. The rest is the color of the blur. CSS3 Shadowspread-radius = Spread * Size

Size: The size of the shadow. In the CSS3, blur-radius + spread-radius = Size that is blur-radius = Size - spread-radius .

Take the values in the example.

color: rgba(118,113,113,.75)x-offset: 5 * cos(180°- 145°) = 4.09pxy-offset: 5 * sin(180°- 145°) = 2.87pxspread-radius: 10 * 6% = 0.6pxblur-radius: 10 - 0.6 = 9.4px;

box-shadow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,113,.75);text-shadow: 4.09px 2.87px 9.4px rgba(118,113,113,.75);

text-shadowNo spread-radius , so the effect in PS can't be fully realized.

Photoshop projection and CSS Box-shadow conversion