---
title: "Grid Pattern 3d — Free Framer component · Best of Framer"
description: "Free Framer component · by Kehinde Clement · Backgrounds. Animated 3D Grid Pattern Transform your website projects with this highly customizable, animated retro-style grid component."
canonical: "https://framer.elliotli.dev/component/grid-pattern-3d"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Grid Pattern 3d

# Grid Pattern 3d

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

![Grid Pattern 3d preview image 1](https://framer.elliotli.dev/og/component/grid-pattern-3d/0958b99258e2b8cc/1600x1200.jpg)

## Summary

Animated 3D Grid Pattern Transform your website projects with this highly customizable, animated retro-style grid component.

## Description

## Animated 3D Grid Pattern

Transform your website projects with this highly customizable, animated retro-style grid component. This component is Perfect for creating modern hero sections backgrounds, retro-style websites, or subtle animated textures

## Features

-   **Three Grid Styles**: Choose between Standard square grid, Diamond pattern, or Diagonal lines
    
-   **Smooth 3D Animation**: Infinite scrolling grid with adjustable speed and direction
    
-   **Adjustable 3D Perspective**: Control depth and viewing angle from 0° to 90° for dramatic effects
    
-   **Customizable Fade Gradient**: Seamlessly blend the grid into your background with adjustable fade height
    
-   **Fully Customizable**: Control every aspect from colors to perspective angle
    
-   **Multi-Directional Animation**: Choose horizontal, vertical, or diagonal movement patterns
    
-   **Flexible Cell Size:** Customize grid cell from 10px by 10px to 200px by 200px spacing.
    
-   **Variable Opacity Control**: Fine-tune visibility from subtle (0.1) to bold (1.0) in 0.05 increments
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-kuqmdvy9-a2zW8qDoHBekAYNDvZ8IpI2irTUsu9)

## How to Use

-   **Add to Canvas**: Drag the Grid component onto your Framer canvas
    
-   **Position & Size**: Resize the component to fit your design
    
-   **Customize**: Use the properties panel to adjust settings to match your aesthetic
    
-   **Layer it**: Place content on top of the grid for stunning visual depth
    

## Customization Properties

**Visual Style**

-   **Grid Cell Size** (10-200px): Adjust spacing between grid lines
    
-   **Line Color**: Change the grid line color
    
-   **Background Color**: Set the base background
    
-   **Opacity** (0-1): Control grid visibility
    

**3D Effect**

-   **Perspective Angle** (0-90°): Tilt the grid (65° recommended for classic look)
    
-   **3D Perspective** (50-1000px): Adjust depth perception
    

**Fade Effect**

-   **Fade Height** (0-100%): Control how much of the bottom fades out
    
-   **Fade Color**: Match your page background for seamless blending
    

**Grid Types**

-   **Standard**: Classic square grid with interactive cells
    
-   **Diamond**: Rotated squares for geometric pattern
    
-   **Diagonal**: 45° angled lines for dynamic effect
    

## Animation Settings

**Direction Controls**

-   **Horizontal**: Grid moves left to right
    
-   **Vertical**: Grid moves top to bottom
    
-   **Both**: Diagonal movement (most dynamic)
    

**Speed Adjustment**

-   Range: 0.5s - 5s per cycle
    
-   Lower = faster, Higher = slower
    

## Best Use Cases

-   Landing page hero sections
    
-   Product showcase backgrounds
    
-   Portfolio headers
    
-   Presentation slides
    

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

-   All · #553

## Details

- **Author**: Kehinde Clement
- **Published**: 2025-10-07
- **Updated**: 2026-01-13
- **Added**: 2025-10-01
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background