Real cookie that rotate with scroll

We use cookies.

Create Patterns With Transparent Background

Written by Jim Raptis

Jun 27, 2021

Create Patterns With Transparent Background
notion image

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
  1. Add a transparent background color

Let's go!

Remove completely the pattern background

notion image

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

  1. Open the export menu (at the top right corner)
  1. Select the PNG format
  1. Check the "Remove background" checkbox

Adjust background transparency

notion image

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
  1. Click on the color mode picker to toggle from HEX to RGBA mode
  1. Choose a color
  1. Adjust the transparency with the transparency slider

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

Create Unlimited Graphics
In Seconds.

The easiest way to brand your business uniquely

MagicPattern Geometric Patterns Editor Preview

©2024 MagicPattern. Founded by Jim Raptis

We also build