---
title: "3D Gradient Card v2 — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Serafim 193 · Cards. Bring depth and motion to your design with the 3D Gradient Card, an interactive Framer component that reacts beautifully to hover and click."
canonical: "https://framer.elliotli.dev/component/3d-gradient-card-v2"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/3D Gradient Card v2

# 3D Gradient Card v2

MUST SEE COMPONENT

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

![3D Gradient Card v2 preview image 1](https://framer.elliotli.dev/og/component/3d-gradient-card-v2/983300be485086ee/1600x1200.jpg)

## Summary

Bring depth and motion to your design with the 3D Gradient Card, an interactive Framer component that reacts beautifully to hover and click.

## Description

Bring depth and motion to your design with the **3D Gradient Card**, an interactive Framer component that reacts beautifully to hover and click. The card features smooth text animations, a rich gradient background, and a 3D **pin element** that appears and settles dynamically, creating subtle circular ripple effects.

On **desktop**, the 3D animation is triggered by **hover**, while on **mobile and tablet**, it activates **on click** for a seamless experience across devices.

## ⚠️ Important Notes:

-   The **gradient cannot be changed via variables** — you can only edit it **directly inside the component**, since Framer doesn’t currently support gradient variables.
    
-   On **mobile and tablet**, make sure to select the **“Phone” variant** to ensure proper functionality and interactions.
    

## Key Features

-   **3D Hover Effect:** Card tilts and reacts to mouse movement
    
-   **Animated Pin:** Appears in 3D space with ripple circles
    
-   **Gradient Background:** Beautiful, smooth color transitions
    
-   **Customizable Text:** Edit titles, descriptions, and fonts
    
-   **Responsive:** Works perfectly on desktop, tablet, and mobile
    
-   **Smart Triggers:** Hover on desktop, click on mobile/tablet.
    

## Best Uses

🚀 Hero sections with interactive highlights🎨 Portfolios and landing pages that need depth and motion✨ Product cards, creative showcases, or modern UI displays

✉️ **Have any questions about the component or want a custom one? Email me at** [**didaserafim90@gmail.com**](mailto:didaserafim90@gmail.com)

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

-   All · #11047

## Details

- **Author**: Serafim 193
- **Price**: $6.00
- **Published**: 2025-11-07
- **Updated**: 2026-09-12
- **Added**: 2025-10-28
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator