Add a blurry gradient to your HTML code

In this tutorial, we're gonna add a blurry gradient on your HTML code as a background.

About the blurry gradient generation, we're gonna follow two paths:

1. Use a simple CSS gradient with blur filter

2. Generate one with the MagicPattern Blurry Gradient tool

Have a preview of the end effect at the Codepen Pen below:

Create a blurry gradient with pure CSS

The blurry gradient effect is created by applying a radial gradient to a circular div element. Then we add the blur filter and adjust its opacity to make it look smoother.

We set the div position to fixed because we want to position the blurry gradient to an absolute position at the screen.

Otherwise, you set the div's parent position to relative and position the blurry gradient relatively to its parent element.

By adjusting the border-radius to random values you change the div shape.

Grab the CSS code below:

.css-blurry-gradient {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 800px;
  height: 800px;
	border-radius: 50% 22% 40% 80%;  
	filter: blur(100px);
  background: radial-gradient(circle at 50% 50%,rgba(76, 0, 255, 1), rgba(76, 0, 255, 0));
  opacity: 0.2;
}

Generate a Blurry Gradient with MagicPattern

Go to the MagicPatter Blurry Gradient tool to easily create a blurry gradient in seconds!

This is a better solution because you only have to choose the gradient color and MagicPattern handles everything else.

Some tips to prepare your blurry gradient for you HTML code:

1. Center the gradient in the MagicPattern canvas

2. Customize your gradient. But don't add grain or blur (it will affect its transparency)

3. Export as PNG without background

4. Compress the exported gradient with tool like iloveimg

5. Host your image on your own servers or use a free tool like imgur

Now, you're ready to import the gradient in your code!

Add the MagicPattern Blurry Gradient graphic to your CSS

By now, you have created your blurry gradient with MagicPattern, exported it as a PNG image, and have a public URL for the image.

Now, it's insanely easy to add it to your code. You just need to create an img element with your gradient image's URL:

<img src='https://i.imgur.com/r0VFFep.png' class="blurry-gradient"></img>

And add the following class to your image element to position your gradient in the screen:

.blurry-gradient {
  position: fixed;
  top: -500px;
  right: 0;
  width: 1000px;
  height: 1000px;
  opacity: 0.5;
}

Thanks for following this tutorial. See ya!