Create Patterns With Transparent Background

People often want to create a pattern with transparent background. The reasons to add transparency to your pattern background, or even remove it, are two:

• Customize the background color using code on your website or/and app

• Overlay the pattern on other graphics to create abstract effects.

MagicPattern got your back! In this tutorial I'm gonna show you two ways to achieve it.

1. Completely remove the background

2. Add a transparent background color

Let's go!

Remove completely the pattern background

To completely remove the pattern's background you need to follow 3 simple steps:

1. Open the export menu (at the top right corner)

2. Select the PNG format

3. Check the "Remove background" checkbox

Adjust background transparency

The second way is to adjust the background transparency by changing the background color mode.

Hopefully, it's very easy to change the color mode via our advanced color picker by simply following the steps below:

1. Open the background color picker

2. Click on the color mode picker to toggle from HEX to RGBA mode

3. Choose a color

4. Adjust the transparency with the transparency slider

And you're ready! The pattern preview displays all these changes immediately.