Design Shack — Web Design Gallery, Articles & Community

You might have seen these fading dividers/separators on various sites, which seem to fade both horizontally and vertically. Here is an example of what I mean:

They provide a great way to split content up, doing so in a subtle and non-intrusive manner. I would like to share a simple way to create these fading dividers using Photoshop.

Step 1

First, create a new layer. By using the pencil tool, draw a 1px solid horizontal line. Hold the SHIFT key as you click and drag the line to keep it straight. This is the basis for the whole fade effect.

Step 2

Select the eraser tool. Choose a very soft brush setting. The larger the brush size, the longer the fade (you can experiment to find the size that works best for your needs).

Step 3

Erase the left and right ends of the line. This makes the line fade near the ends.

Step 4

Duplicate the layer containing the line (right click the layer in the right hand panel, then select ‘duplicate’). Select the lower of the two layers.

Step 5

Select filter>blur>Gaussian blur. Choose a radius of 3px to create the fade effect (or pick one which suits you!).

Step 6

Use the marquee tool to select everything on or above the solid line (with the blurred layer selected). Hit delete key.

Step 7

Adjust the opacity of the solid line and/or the shadow to suit your preference. Here is what it looks in the end.

As a final note, if you want a greater amount of shading (like the one shown in the example at the top of the page), you can achieve that by duplicating the blurred layer multiple times (right after applying the Gaussian blur) until you are happy with the extent and intensity of the blur (and then, merge the blurred layers).

You can use this technique to create both horizontal and vertical content dividers. And with a little bit of tinkering around, it’s not too hard to come up with something like:

So go on and spice up your borders, separators and edges! If you know of any other sites using this technique (or would like to share your own), please let us know in the comments. You never know, if we like your design it may end up being featured on the site!