## Why Flat Shapes Feel Deep A **gradient** is a smooth change from one color or value to another, and it’s one of the simplest ways to make a flat shape feel like it has **volume**. Even when a circle or square is just a 2D patch on the screen, your eyes read lighter and darker areas as clues about turning surfaces. That means a plain shape can start to feel rounded, puffed up, or pushed back without changing its outline at all. This matters because a lot of visual depth in design comes from value shifts, not from actual 3D geometry. If you’ve ever seen a button look pressable or a sphere look solid, you were likely responding to carefully placed light and dark transitions. **Try thinking of a gradient like a visual slope**: instead of the surface physically rising or falling, the brightness changes make your brain imagine form. <viz id="0"></viz> **Drag the blend slider** from flat fill toward full gradient. **Compare the matching shapes side by side** and watch which ones begin to feel rounded or pushed back even though their outlines stay the same. Notice what changed: not the shape itself, but your interpretation of it. When one side becomes lighter and another side darker, you start reading the shape as if it has a front, side, or curved surface. That is the core idea behind gradient depth. You can treat this as a kind of visual shortcut. Instead of drawing every surface detail, you guide the eye with value transitions. In the next step, you’ll see that these transitions are not random — they depend on where the light seems to come from: <ref slide="2">Follow the Light</ref>. ## Follow the Light A shape looks three-dimensional when its **highlight** and **shadow** agree with a believable **light direction**. If the light appears to come from the upper left, the brightest area should shift there, while the darker region settles on the opposite side. Your brain uses that pattern to infer how the surface is oriented in space. This is why the same circle can look like a sphere lit from above, from the side, or even from below. The outline stays identical, but the internal shading pattern changes the story. **Think of light direction as the rule that organizes the gradient** — it tells you where the form faces the light and where it turns away. <viz id="1"></viz> **Drag the light arrow** around the shape, or **turn the dial** if one is provided. Watch the brightest and darkest areas slide across the surface, and notice how the sphere still feels solid even though only the lighting pattern changes. As you move the light, the shape keeps its volume because the shading remains consistent with a single source. That consistency is what makes the illusion believable. If the highlight and shadow were placed randomly, the form would feel confusing or flat. This also explains why gradients work best when they imply a clear lighting logic. A smooth transition is helpful, but it becomes much more convincing when it shows where the form turns toward the light and away from it. Next, you’ll push that idea further by seeing how the strength of the light-dark difference affects depth: <ref slide="3">Contrast Builds Volume</ref>. ## Contrast Builds Volume **Contrast** is the difference between light and dark values. When that difference is small, a shape can feel soft or nearly flat. When the difference becomes larger, the shape tends to feel more solid and dimensional. In other words, stronger value separation often makes the turning of a surface easier to read. This matters because volume is not only about having a gradient — it’s also about how much the values change across the form. **Think of contrast as the intensity of the depth signal**. A whisper of light and shadow can suggest form, but a clearer jump between bright and dark often makes that form pop. <viz id="2"></viz> **Move the contrast slider** from low to high. **Hover over the forms** to inspect the brightest and darkest regions, and compare how strongly each blob seems to bulge forward as the value difference increases. You’ll likely notice that low-contrast forms feel gentler and less assertive, while high-contrast forms seem to stand out more clearly. The surface hasn’t become more curved in reality — you’re just receiving a stronger cue about where it faces the light and where it falls away. This is useful in design because you can control how much presence an object has. Higher contrast often makes something feel closer, bolder, or more sculpted, while lower contrast can make it feel quieter. But value shifts are only part of the story; the sharpness of the transitions also changes the effect, which you’ll explore next in <ref slide="4">Edge Control Matters</ref>. ## Edge Control Matters An **edge** is the transition boundary between one area and another. When that boundary is crisp, a form can feel sharper, firmer, or closer to you. When it becomes soft or blurred, the form can feel smoother, more atmospheric, or farther away. This is called **edge control**, and it’s a major depth cue even when the colors themselves barely change. You can think of edges as telling your eye how abruptly one visual condition becomes another. **Hard edges feel decisive**; **soft edges feel gradual**. A polished button, a misty orb, and a distant hill might all use similar values, but their edge treatment changes how you read their material and position. <viz id="3"></viz> **Slide the edge softness control** from hard to soft. **Compare the different objects** and watch how crisp edges make forms feel more defined, while blurred edges make them feel gentler, hazier, or farther away. This is a subtle but powerful tool. Two shapes can share the same general shading pattern, yet the one with cleaner edges often feels more immediate. The softer one may seem to recede or dissolve into the space around it. That means depth is not just about where light and shadow go, but also about how sharply those regions meet. Once you understand edge behavior, you can start breaking a form into shading zones and seeing how each part contributes to curvature. That’s the focus of <ref slide="5">Shade the Form</ref>. ## Shade the Form **Shading** is the organized progression from **highlight** through **midtone** into **shadow**, often with a touch of **reflected light** near the darker side. These zones help a flat silhouette communicate how its surface bends in space. Instead of seeing a plain shape, you begin to see a form that turns gradually toward and away from the light. This matters because a convincing object usually isn’t just split into light side and dark side. There are layers within that transition. **Think of shading as a map of surface turning**: each zone tells you something about the angle of the form relative to the light source. <viz id="4"></viz> **Toggle the shading zones** on and off one by one, then **drag the light source** to reposition them. Watch how each band slides across the object and how the form becomes easier or harder to read depending on which zones are visible. When you isolate the zones, you can see that each one contributes a different clue. The highlight marks the area most directly facing the light. The midtone bridges the turn of the surface. The core shadow shows where the form curves away most strongly, and reflected light keeps the shadow side from feeling completely empty. Together, these regions make the object feel structured rather than simply decorated. You’re no longer relying on a generic gradient; you’re describing how a surface actually turns. In the final step, you’ll combine gradient, light direction, contrast, and edge control into one small scene: <ref slide="6">Combine for Space</ref>. ## Combine for Space The strongest sense of **space** appears when several cues work together: **gradient**, **light direction**, **contrast**, and **edge control**. Any one of these can suggest depth on its own, but when they align, flat design starts to feel layered and believable. Foreground forms can appear sharper and stronger, while background forms can soften and recede. This is the big idea of the lesson: depth is usually a combination, not a single trick. **Think of these cues as a team**. Light placement explains the form, contrast strengthens it, gradients smooth the transition, and edges help place objects in visual hierarchy. <viz id="5"></viz> **Adjust the light direction, shadow strength, gradient smoothness, and edge softness**. **Watch the whole scene respond** as some shapes come forward, others fall back, and the composition becomes more or less spatial depending on how consistently the cues work together. Notice that the most convincing results happen when the choices support each other. A shape with clear lighting, enough contrast, smooth turning, and suitable edge treatment tends to feel grounded in the same space as the other objects. If one cue fights the others, the illusion weakens. That’s a useful takeaway for any visual work. You do not need complex 3D modeling to suggest form — you just need consistent value and edge decisions. By combining the ideas from <ref slide="1">Why Flat Shapes Feel Deep</ref>, <ref slide="2">Follow the Light</ref>, <ref slide="3">Contrast Builds Volume</ref>, <ref slide="4">Edge Control Matters</ref>, and <ref slide="5">Shade the Form</ref>, you can make simple shapes feel surprisingly dimensional.