How can I convert shadows from Figma to Webflow? In Figma, shadows have parameters X and Y, while in Webflow, there is only Distance with Angles. How can I determine the angle from X and Y in Figma for Webflow? Thank you.
TL;DR
- Use Distance = √(X² + Y²) to convert Figma's X and Y offsets.
- Use Angle = atan2(Y, X) × (180/π) to calculate Webflow’s shadow angle in degrees.
To convert Figma shadow values (X and Y offsets) into Webflow’s angle and distance format, you'll need to calculate those two values using basic trigonometry.
1. Understand Figma vs. Webflow Shadow Inputs
- Figma uses:
- X offset: horizontal displacement
- Y offset: vertical displacement
- Blur and spread
- Webflow uses:
- Distance: total distance from the element
- Angle: direction from which the shadow is cast
2. Calculate Distance
- Use the Pythagorean theorem:
- Distance = √(X² + Y²)
- Example: If X = 10, Y = 10 → Distance = √(10² + 10²) = √200 ≈ 14.14
3. Calculate Angle
- Use inverse tangent (arctangent) to determine the angle:
- Angle in degrees = arctangent(Y / X) — convert the result from radians to degrees if needed.
- Use a calculator or Google with this format:
- Example:
atan2(10, 10) × (180 / π)→ Angle = 45°
- To simplify: use this rule based on quadrant, as Webflow angles are clockwise from the top (0°):
- Right (X+, Y=0): 90°
- Down (X=0, Y+): 180°
- Left (X−, Y=0): 270°
- Up (X=0, Y−): 0°
- Use atan2(Y, X) for accurate angle calculation across all quadrants.
4. Apply Shadow in Webflow
- Go to the Style panel, then to Box Shadow
- Set:
- Angle: as calculated above
- Distance: from step 2
- Blur and Spread: match directly from Figma
5. Use Free Tools If Needed
- Tools like shadows.brumm.af or online shadow converters can translate Figma-esque shadows into Webflow code/values.
Summary
To convert Figma shadows to Webflow:
- Distance = √(X² + Y²)
- Angle = atan2(Y, X), converted to degrees
This allows you to replicate the same shadow look in Webflow using its angle-based system.