How to Create Fluffy 3D Elements in Figma (Step-by-Step Tutorial)

Original carousel by @uiux.amina, follow for more Figma tutorials and design tips.

---

You've seen those soft, puffy, almost marshmallow-like 3D elements popping up in UI design everywhere. They look like they came from a 3D rendering tool like Blender or Cinema 4D, but here's the secret: you can create them entirely in Figma.

No plugins. No external software. Just Figma's built-in effects, gradients, shadows, and layering, combined with a few clever techniques. Here's the full process.

Step 1: Start With an Ellipse

Create an ellipse shape and remove the stroke. This will be the base of your fluffy element. The size determines how large your final fluffy shape will be, start with something around 200x200 pixels to give yourself room to work.

Keep the fill color for now, we'll modify it in the next step. The key here is simplicity: a single shape, no stroke, ready for effects.

Step 2: Add a Soft Gradient Fill

Replace the solid fill with a linear gradient. Start with white on one side and transition to a soft color, pink, blue, purple, whatever fits your design. The gradient creates the illusion of light hitting a 3D surface, which is what makes the element feel rounded and dimensional rather than flat.

Position the gradient angle to simulate light coming from the top-left, which is the most common (and most natural) lighting direction in UI design. Adjust the midpoint to control how quickly the color transitions.

Step 3: Apply Drop Shadows for Depth

This is where the magic happens. Add a drop shadow with these approximate settings:

• X & Y offset: 0 (centered)
• Blur: 40-60px (high blur for softness)
• Spread: 0
• Color: Match the darker end of your gradient
• Opacity: 30-40%

The large blur creates the soft, fluffy quality. The matching color (not black) keeps the shadow feeling like a natural extension of the shape rather than a harsh dark blob underneath it.

Step 4: Add Inner Glow for Dimension

Add an inner shadow with a light color (white or near-white), a small offset (2-4px from top-left), and a moderate blur (8-15px). This creates the highlight that makes the element look like it's catching light from above, the same way a real 3D object would

The inner glow is what separates a flat circle with a gradient from something that looks genuinely puffy. It's the equivalent of adding a specular highlight in 3D rendering.

Step 5: Layer Multiple Shapes

For the full fluffy effect, create 2-3 variations of your element at different sizes and slightly different colors. Offset them and group them together. The overlapping creates a cloud-like, organic feel that a single shape can't achieve alone.

Experiment with opacity on the top layers (70-90%) to let the shapes below peek through. This stacking technique is what gives the element that pillowy, cotton-candy quality.

When to Use Fluffy Elements

These soft 3D shapes work best as:

• Background accents on landing pages
• Card decorations to add depth
• Empty state illustration elements
• Playful onboarding or welcome screens

They add warmth and personality without crossing into skeuomorphism. The trick is restraint, one or two fluffy elements make a design feel alive. An entire page of them looks like a marshmallow factory.

Want to build your own design tool or app without writing code? Try Base44, the AI app builder that lets designers turn ideas into working products.

---

Original carousel by @uiux.amina on Instagram. View the original post.