Abstract Gradient Backgrounds in Illustrator

    ●   Add a Background to your Project.

Learn About:

Pencil Tool The Pen Tool Gradient Picker
Angle a Gradient Transparency Palette

  •   This tutorial is part of the CD Cover, Picture Perfect, Shadow Life, and the Design Your Identity Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open your Project in Illustrator ~

Open YOUR PROJECT in Illustrator

    ●   If you are working on the
CD Cover Project open that ...

    ●   OR, if you are working on the
Picture Perfect Project
open that ...




   ●   OR, if you are working on
Shadow Life Project open that ...

… (Remember: all these tutorials are intended to be
applied to YOUR PROJECT) …



Step #2: New Layer ~

Make a New Layer and lock your other layers.

Step #3: Create a Rectangle ~

Get the Rectangle Tool or hit the keyboard shortcut letter (m) …

rectangle tool

… and create a rectangle covering your artboard.

Step #4: Add a Gradient ~

With the Rectangle Box selected, click the Gradient Tool.

Step #5: Set your Color ~

Double-Click the Gradient Slider and select a color …

Also do the other side, too.


Adjust the angle and aspect of your gradient here (if necessary).


Step #6: The Pen Tool ~

Get the Pen Tool or hit the keyboard shortcut letter (p) …

… create a new closed shape.


Set NEW gradient colors for the shape you created.


Step #7: Blending Modes ~

With the new shape selected, click Transparency or go to: Window > Transparency

… and change the Blending Mode of the new shape until you get something you like.

Step #8: Transparency ~

Also, lower the Transparency of the shape :

Step #9: Feathering ~

With shape still selected, go to: Effect > Stylize > Feather

… and try setting the Radius …

… to create a smooth blended edge to the shape.

Step #10: Duplicate the Shape ~

Duplicate the shape holding :

Step #11: Drag the Shapes Around ~

Drag the shapes around, rotating them, shrinking and expanding them until you have a composition that looks right:

Step #12: Abstract Wave ~

Get the Pencil Tool, or hit the keyboard shortcut letter (n) …

… and make 2 wavy lines.

Step #13: Blend Tool ~

Go to: Object > Blend > Blend Options, enter Specified Steps of your choosing.

Then with both strokes selected (hold Shift to select multiple items) go to: Object > Blend > Make or hit the keyboard shortcut: 

Alt (⌥)/Option alt option + Cmd(⌘) cmd key + B

This will blend the 2 strokes and create an abstract wave effect.

Step #14: Change Stroke Color ~

Get the Direct Selection Tool or hit the keyboard shortcut letter (a) …

… select one of strokes and change the stroke color.

If you want to change the Blend steps, you can go to: Object > Blend > Blend Options again.

Step #15: Wild Blend ~

Now go crazy with your Pen tool, create 2 wavy strokes and blend them. Play around with the Blend step, stroke weight and color.

Last Steps: Save and Attach ~




STOP HERE - steps #16 thru #18 are ONLY if you are making a background for a web page. Otherwise, save your work as an .ai document here.



(Optional Last Steps) #16: - ONLY if you are working on a background for your website ~

If you're NOT saving it for a web page background, then skip to the LAST STEP.

Go to: File > Save for Web … and save the file as a .jpg

Lower the quality of the image until the size is below 100 kilobytes, on average.

Backgrounds for websites should be as small as possible. They must be downloaded every time your viewers open your pages so it's important to keep it as small as possible so they load quickly.

Step #17: Root Folder ~

Save the file in the root folder of your project:

Step #18: CSS Styles Panel ~

Open your styles and lood for the body tag …

… select Background and attach the image.

Last Step: Save and Attach ~

If you're working on your website background, upload to the server and post the link to your site.

Or, if you're making a background for some other project, go to: File > Save as … and save your work as an .ai file.

Attach it and continue working …

  •   ALWAYS save your projects using the following naming convention:

  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.

  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.