# Create Flat 2D-Styles in 3D Scenes - Materials & Shading That Look Good - 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. [Courses](https://spline.design/academy/collections)
3. [Materials & Shading That Look Good](https://spline.design/academy/collections/materials-shading-that-look-good)
4. Create Flat 2D-Styles in 3D Scenes

# Create Flat 2D-Styles in 3D Scenes

Lesson 5 of 12Spline 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

## Up next

[How to Create an Iridescent Material Effect5 minBeginner](https://spline.design/academy/collections/materials-shading-that-look-good/how-to-create-an-iridescent-material-effect)[Continue](https://spline.design/academy/collections/materials-shading-that-look-good/how-to-create-an-iridescent-material-effect)

[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.