> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/components/3d-depth.md).

# 3D Depth

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2F4ykXBKXh5l1X66B79xRX%2FScreenshot%202026-05-21%20at%208.06.26%E2%80%AFPM.png?alt=media&amp;token=f5016827-2509-4924-a9a2-9be84b585637" alt="" width="300"><figcaption></figcaption></figure> <figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FlL7SD53usWFuH2GQYi3T%2FScreen%20Recording%202026-05-21%20at%208.07.42%E2%80%AFPM.gif?alt=media&amp;token=4e612c34-837e-4856-83a9-485c53d5dcb6" alt=""><figcaption></figcaption></figure></div>

<mark style="color:$success;">**3D Depth**</mark> provides a fun depth effect for images, shapes, and text. It pairs great with [3D Lift](/docs/design/templates-design-your-cards/components/3d-lift.md).

{% hint style="warning" %}
**3D Lift** and **3D Depth** can be fairly heavy, and may reduce frame rate in your browser when dragging values around.
{% endhint %}

***

## Mode

In *Uniform* mode, you choose the *Direction* to determine where the effect goes. Toggle on *Use Template Angle* to use the shadow angle set on the Template.

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FVCPROKG3Biga9ZmWKoOf%2FScreen%20Recording%202026-05-21%20at%208.23.18%E2%80%AFPM.gif?alt=media&amp;token=e54f2e10-aa84-476b-8564-08fbb08c8dd6" alt=""><figcaption></figcaption></figure> <figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FwZgUR91J2MxY3ubzLONZ%2FScreen%20Recording%202026-05-21%20at%208.12.11%E2%80%AFPM.gif?alt=media&amp;token=98074f6b-2b03-48c9-9bb5-1e438e6f0170" alt=""><figcaption></figcaption></figure></div>

Choose *Perspective* mode to have the effect point toward a point. This can be used with the Template perspective point as well.

***

## Thickness

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2Frd4x9JFiWbcjBs2lekSC%2FScreen%20Recording%202026-05-21%20at%208.36.31%E2%80%AFPM.gif?alt=media&amp;token=5fa8a3ac-5ec9-4fee-9888-0355e4e2f023" alt=""><figcaption></figcaption></figure>

Increase the thickness of the depth portion, which creates a border-like effect. Choose a gradient and make a very quick change in color to give the effect of a solid border that turns into a gradient.

<figure><picture><source srcset="/files/FFzPpvBd3InxOxFJg6He" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FhzZIe86Bhgxk3e29GB0E%2FScreenshot%202026-05-21%20at%208.35.34%E2%80%AFPM.png?alt=media&amp;token=f2c05751-137d-4e7c-bc2d-2e1a4fbeb5e7" alt="" width="308"></picture><figcaption></figcaption></figure>

***

## Shading

*Solid* gives a single color for the entire effect, while *Gradient* enables a gradient.

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FPw0lNHszXdmgLmO4IENS%2FScreenshot%202026-05-21%20at%208.39.06%E2%80%AFPM.png?alt=media&amp;token=6f0c9c17-b9de-4baf-b5b8-6f0d2f545002" alt=""><figcaption></figcaption></figure> <figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2Fa4mIvtt9tl4yxGcFXgq1%2FScreenshot%202026-05-21%20at%208.39.49%E2%80%AFPM.png?alt=media&amp;token=37fa5845-07fe-4bf8-a6a3-88c187a3c54a" alt=""><figcaption></figcaption></figure></div>

*Lit* shading simulates a light source casting shadows.

Change the *Light* value to change where the light is coming from.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FYN4qSOnyq0se3LKy7DB4%2FScreen%20Recording%202026-05-21%20at%208.40.33%E2%80%AFPM.gif?alt=media&amp;token=030bfc13-13c5-45f2-afb8-6b119a287c74" alt=""><figcaption></figcaption></figure>

Change the *Intensity* value to change the intensity of the light itself.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FgJsCmYNLzLVfatXBcrUe%2FScreen%20Recording%202026-05-21%20at%208.40.33%E2%80%AFPM.gif?alt=media&amp;token=9320aded-cced-4447-acb0-4da9d5f45bdc" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/components/3d-depth.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
