# Create Flat 2D-Styles in 3D Scenes - Spline Academy (https://spline.design/academy/tutorials/create-flat-2d-styles-in-3d-scenes)

> Hello! In this video, we guide you on how to create a cartoonish or flat 2D-like effect using Spline. Check Spline: https://spline.design/

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Create Flat 2D-Styles in 3D Scenes

# Create Flat 2D-Styles in 3D Scenes

Spline 3DBeginner6 min

Hello! In this video, we guide you on how to create a cartoonish or flat 2D-like effect using Spline. Check Spline: <https://spline.design/>

You will also learn how to use outline layers, add color to different sides of an object, and apply animations and interactions.

We also explore applying the 2D look to an object from the Spline library, like a Jordan shoe 👟

This tutorial is inspired by <https://www.spaag.fr/> created using Spline - Designed by LEOLEO Studio.

💖 Join our Community 👉 <http://discord.gg/spline> 📘 Learn more at Spline Docs <https://docs.spline.design/>

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=rhuvJuptf-4&t=0s)
2. [0:26Creating 2D-like 3D Effect](https://www.youtube.com/watch?v=rhuvJuptf-4&t=26s)
3. [0:43Adjusting Lighting and Shadows](https://www.youtube.com/watch?v=rhuvJuptf-4&t=43s)
4. [1:08Using Outline Layers and Adding Color](https://www.youtube.com/watch?v=rhuvJuptf-4&t=68s)
5. [4:17Animations and Interactions Examples](https://www.youtube.com/watch?v=rhuvJuptf-4&t=257s)
6. [4:27Applying 2D Look to Spline Library Objects and Exporting](https://www.youtube.com/watch?v=rhuvJuptf-4&t=267s)

## Related resources

- [Flat 3DTemplate](https://app.spline.design/academy/tutorials/create-flat-2d-styles-in-3d-scenes?redirect-duplicate-template-uuid=b3ead5a2-0df3-4bcf-950b-70ab0dcc5614&is-2d-file=false)
- [Depth Layer / 3D GradientDocument](https://docs.spline.design/materials-shading/depth-layer-3d-gradient)
- [Outline LayerDocument](https://docs.spline.design/materials-shading/outline-layer)

## Overview

- Spline 3D
- 6 min
- Beginner

## Part of

- [Materials & Shading That Look Good](https://spline.design/academy/collections/materials-shading-that-look-good/create-flat-2d-styles-in-3d-scenes)

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[How to Create 3D Data Visualizations in Spline Using Variables and Real-Time APIsSpline 3DAdvanced15 min](https://spline.design/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Create Liquid Glass Materials in 3DSpline 3DBeginner12 min](https://spline.design/academy/tutorials/create-liquid-glass-materials-in-3d)[How to Sculpt a 3D Gummy Bear with Shape BlendSpline 3DBeginner8 min](https://spline.design/academy/tutorials/how-to-sculpt-a-3d-gummy-bear-with-shape-blend)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.