How to create beautiful background gradients


In this tutorial I’m going to show you how to create beautiful gradients. This technique is what you see in some of the latest trends using the Gaussian Blur filter tool.

If you go onto Dribbble, and you look at some of the presentation on how people present their portfolio work or UI design work you will notice its a great way to lay out your background and display your your UI design work on top of it. Here some examples of nice, soft and very ascetically appealing.

  1. To get started, go onto ‘Colors‘ section on the Dribbble website. Once the page has loaded, you can choose any colour from the platte. Look for images with different creative colours.
  2. Once you have found your image, click to open it’s page. Then, right click on your chosen image and select ‘Copy Image’
  3. The graphics design engine within Photoshop is far superior than any other graphic tool out in the market. So, fire up Photoshop and create a new canvas project by going File > New and setting the document to 1600px in width by 1200px in height. At this point you also want to set your background colour to Black.
  4. Paste your image into the project by clicking on Edit > Paste (keyboard shortcut: ctrl+V on Windows, cmd+V on Mac) and stretch the image out to fill the canvas. It doesn’t matter if your image is pixellated, the distortion won’t be noticeable after applying the filter.
  5. With your project set, go to Filter > Blur > Gaussian Blur and slide the Radius pixel to increase the gradient. I recommend to play around with it close to the 200 mark.
  6. Lower the opacity slightly so that the content sitting on top of the gradient background really shines.

And thats it! You now want to export the background by going to File > Save for Web and from the pop up window, ensure the quality is set to 100%.

Leave a Reply

Your email address will not be published. Required fields are marked *