When thinking about which websites become more successful, it's clear that the undisputed winners are those that offer convenient functionality. But as we know, functionality alone is not enough—equally important are aesthetics and visual details, which directly impact how well that functionality performs. Today, we’ll look at visual effects like shadows and gradients.

Even though flat web design is trending, subtle shadow effects add a certain charm to the entire site. They’re typically used in small amounts—either to highlight something important or simply for visual appeal. When discussing the depth effect, we already touched on the topic of shadows, so we won't dive too deep into their usage again—but we’ll definitely show some new examples.

Let’s focus on how to use them more extravagantly, what types of shadows exist, what they depend on, and of course, how to create them in Photoshop—because there are lots of clever tricks out there.

Light and Shadow Design

Images or elements with shadows seem to float—literally—above the webpage. As a result, users want to touch them or click on them. These effects are often used for buttons, menu items, or lines. They appear when you hover the mouse cursor and signal that the element is interactive. Another kind of shadow appears in registration forms: input fields might look dim by default, then light up when a user clicks on them, showing they're active.

Shadows help create visual hierarchy on a webpage. According to the laws of physics, objects can sit next to each other but not overlap through one another. That means objects cast shadows onto nearby objects and reflect light. So, the graphic interface relies on the principles of 3D space and light-and-shadow interaction.

Google’s Material Design adheres very strictly to the laws of physics, making it easier for users to understand how the interface works. Without even slight shadows, it wouldn't be clear which elements are actually interactive.

Shadows also vary in size. You’ll often notice this on buttons—when you hover over them, the shadow might be one size; when you click, it changes; and when static, it may be smaller or gone entirely.

But the most important thing about using shadows in web design is visual realism. You can achieve this through, for example, 26 different ways of adding volume to an object, whether it’s an image or a text block.

Information Highwayman

A very unusual website in a typographic style—especially when compared to most modern flat, tile-style websites. We're interested in the use of shadows in the menu that appear behind text when you hover the mouse. Nearly all links on the site are styled this way.

Campaign Monitor

This project’s web design meets all current standards, but some key images use shadows. These shadows are barely visible—especially against the purple background—but they are there, and they help build visual hierarchy between buttons and text blocks.

Similar styles are found in projects like Alfred, Corvus Design, Squarespace, “Tarelka Stolovaya”, Greek Shadows, WaveOC. In each of these, shadows are used either to highlight images, menu items, or specific UI elements. Each design is modern and innovative in its own way—some even showcase original, artistic work.

Also note the use of shadows in logos and under images—they fit nicely into the overall design. This includes the blog of Kelli Anderson, Blue Hosting, and the whiskey brand Woodinville Whiskey Co.

Photoshop and Shadows

The easiest way to create a shadow in Photoshop is by using layer styles. And for most people, it’s clear and convenient. But sometimes, this method works against web designers. Beginners tend to rely only on this method, and as a result, are surprised when professionals manage to create more striking images with complex, gradient shadows and unique shapes. But there’s a way out.

Unusual Shadow

An unusual shadow effect can resemble layered or misaligned text. You’ll often see variations of it in logos, discount banners on e-commerce sites, typographic designs, or retro elements.

Step 1

Create a new text layer with any word (e.g., “web”) and set the Fill value to 0% in the layers panel. Note: not Opacity, but specifically Fill, because Fill allows layer effects to remain visible, while Opacity hides them too.

Step 2

Open the layer’s blending options and choose Stroke. Set the width to your liking, but it’s better if each character is clearly visible—neither overly rounded nor with sharp corners.

Step 3

Still in the same window, select Drop Shadow. Try different extravagant options. The smaller the Size and Spread values, the harder the Shadow edge will appear.

Many think that if the Fill is set to 0%, the Shadow should be visible and pass through the text. But that’s not true—it will still be hidden where it should be according to physics. There is a solution though.

Step 4

Close the layer style window, then right-click the Fx icon next to the text layer and choose “ Create Layer.” Now all effects that were created as layer styles are split into separate layers and can be edited individually. Even better— the Shadow now appears through the Fill and becomes visible, breaking the physics rules.

This method allows for various complex and creative shadow effects. You can even duplicate shadow layers to create stepped, multicolored designs.

Advanced Shadows in Photoshop

Another version of this effect involves more complex shadowing, which takes more time to create. If you look at the image at the beginning of this article, we’re talking about Shadows number 13 through 26. These may appear only in corners, only in the center, or both. They visually create the illusion of corners curling upward—a trick achieved with gradients.

Gradients play a big role in web design. They help set light direction and shadow fall, and also enable stunning visual effects—all while flat, minimalist design remains fashionable.

Step 1

Create an object (e.g., a rectangle) and rasterize it. The shadow here will be created differently than with Layer Styles. While you could use the earlier method and then separate into layers, it’s harder to work with gradients that way. This approach is simpler…

Create a copy of the rectangle layer and move it down (or wherever the shadow should be). Erase any excess using the Eraser and adjust the shadow’s length.

Step 2

Use Transform (Ctrl + T) to slightly increase the shadow line’s height. This makes it easier to edit, and you can always hide any extra under the original object layer.

Step 3

Now apply a Gradient Overlay to the shadow layer. Choose a gradient that suits your design. Set the Style to “Reflected” and the Angle to 180. This will darken the corners while keeping the center softly lit. Double-click the gradient field to open the editor.

Here you can customize colors by clicking on the sliders below the gradient field. In this case, we chose the third preset from the top and modified it. Try different options until one feels right.

Step 4

Shadows are rarely sharp. So apply Filters → Blur → Gaussian Blur to gently soften the shadow. Even if it’s far from the object, that’s okay—it's on a separate layer and can be moved or edited later if needed.

Step 5

Technically, our shadow is done, but it doesn’t look quite right. Why? Physics again—shadows don’t exist without light. Our object is completely flat, making the shadow feel unnatural.

So, let’s add lighting. Go to the rectangle’s layer and apply Gradient Overlay. Photoshop includes many gradients that aren’t loaded by default. Choose the Diamond style, then double-click the gradient to open the editor.

Click the gear icon and choose the Pastels collection. We used “Yellow, Green, Blue” and modified it to use only shades of blue.

If the gradient won’t apply, first fill the object with any color, then go back to editing the Blending Style.

Add a stroke if desired—different stroke styles can change the perception of the object entirely.

Step 6

We now have a simple, yet attractive and complex shadow. You can apply it only to corners or stretch it—this is done via Transform → Warp.

So, creating shadows isn’t hard. If the project contains mostly static info, these decorative techniques are totally valid.

Asus also uses subtle shadows under menu lines and objects. It looks like a line, but acts like a shadow during interaction.

A complex shadow can also be seen in the menu of the Greek Shadow project, beneath the slider of Atiba Mobile (where the shadow is enlarged in the center), and on dascolabarbers.com, which uses corner shadows behind the menu ribbon.

The Role of Gradients

Don’t forget: gradients help create light-and-shadow effects directly on an object, even without external shadows. Menu panels, info blocks, borders—they look three-dimensional but may not use traditional shadows. A great example is the Apple website. Each info block has a shadow, gradient, and distinct light source. This affects the visual “puffiness” of the object.

The design of NVidia also uses gradients to add depth, though you’ll also notice tiny shadows beneath some elements.

Conclusion

A small, subtle shadow can give your site depth, helping users understand how interface elements are related—what’s interactive and what’s not. Gradients and shadows add volume, establish hierarchy, and organize page content.

Don’t be afraid to experiment. Create shadows that fit your style, trends, and taste. Clean, refined shadows are never out of place.