---
title: "3D Parallax — Free Framer component · Best of Framer"
description: "Free Framer component · by Dmytri Ivanov · Effects. What is ThreeDParallax?"
canonical: "https://framer.elliotli.dev/component/threedparallax"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/3D Parallax

# 3D Parallax

[View on Framer](https://framer.com/marketplace/components/threedparallax/?via=elliot-li)

![3D Parallax preview image 1](https://framer.elliotli.dev/og/component/threedparallax/63d54338d7b44b6e/1600x1200.jpg)

## Summary

What is ThreeDParallax?

## Description

### What is ThreeDParallax?

The **ThreeDParallax** component transforms static images or layouts into engaging, interactive 3D experiences. Utilizing CSS perspective and transform-style: preserve-3d, it creates a layered depth effect. When a user hovers, the component smoothly tilts and "pops out" of the screen. Crucially, the foreground image layer shifts slightly in the opposite direction (the **Parallax effect**), creating a realistic, separate sense of depth and motion.

### Key Features

-   **Layered 3D Motion:** Creates a convincing spatial effect by handling the background and the foreground image layers independently in 3D space.
    
-   **Tilt & Rotation Control:** Adjust the maximum rotation angle (Max Rotation) to control the intensity of the tilt on hover.
    
-   **Pop Out Depth:** Control how far the entire component appears to pop out from the screen (Pop Out Depth).
    
-   **Multi-Shadow System:** Use the powerful **Shadows Array** control to add **multiple box shadows** (Inside/Outside, X/Y Offset, Blur, Spread) to the background layer, allowing for complex, realistic lighting and neomorphic effects.
    
-   **Parallax Customization:** Fine-tune the image movement intensity (Parallax XY Intensity and Parallax Z-Depth) to perfect the layered motion.
    
-   **Customizable Background:** Easily enable or disable a solid background color behind the image layer using BG Color.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3571

## Details

- **Author**: Dmytri Ivanov
- **Published**: 2025-12-02
- **Updated**: 2025-12-06
- **Added**: 2025-11-22
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo