CodeNewbie Community 🌱

Cover image for Creating a Splash Effect with HTML and CSS (with Video)
Álvaro Montoro
Álvaro Montoro

Posted on • Originally published at alvaromontoro.com

Creating a Splash Effect with HTML and CSS (with Video)

Today’s word for the divtober challenge is “splash.” In this article, I will show how to create a splash effect with a single HTML element and a few lines of CSS. If you prefer a video explaining the process, scroll down to the bottom of the article.

We start by creating the element. I usually go with a <article> for CSS art, but this one is more of a decorative thing, so I will keep it simple with a <div> (but any block-type element would work, really):

<div class="splash"></div>
Enter fullscreen mode Exit fullscreen mode

We need to do a basic setup, specifying the width, height, and border radius (or lack thereof). The shape that we use will ultimately determine how the splash will look.

.splash {
  width: 500px;
  height: 500px;
}
Enter fullscreen mode Exit fullscreen mode

We will create the splash effect by having a set of repeating conic gradients and then applying CSS filters. In particular, two:

  • blur(): to use a Gaussian blur, which will blur the colors and mix them a little.
  • contrast(): to adjust the contrast of the blurred backgrounds, blending them and making them look sharper.

The result will vary depending on our values: a higher blur radius will create more indeterminate blobs, and a higher contrast will remove blurriness and make things sharper.

Let’s start with just one repeating conic gradient:

.splash {
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(#00f 0 3%, #0000 0 11%) #fff;
  filter: blur(20px) contrast(20);
}
Enter fullscreen mode Exit fullscreen mode

With this code, the splash looks like this:

blue lines over a white background, the edges are blurred

The edges look bad because our element has a blue and white background, but the filter blurs it in a “funky” way with transparency around it. The solution? Adding a small white box shadow around the element:

.splash {
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(#00f 0 3%, #0000 0 11%) #fff;
  filter: blur(20px) contrast(20);
  box-shadow: 0 0 0 50px #fff;
}
Enter fullscreen mode Exit fullscreen mode

With this small change, our splash looks like a splash:

blue drops spreading in all directions from the center

This result could look great with text or an image in the center, but we will take it one step beyond. By adding more repeating conic gradients (and maybe a radial gradient here or there), we get a different type of splash:

.splash {
  width: 500px;
  height: 500px;
  background:
    repeating-conic-gradient(#00f 0 3%, #0000 0 11%),
    repeating-conic-gradient(#0000 0 5%, #00f 0 7%) 50% / 60% 60%,
    repeating-conic-gradient(#0000 0 7%, #00f 0 9%) 50% / 70% 70%,
    repeating-conic-gradient(#0000 0 11%, #00f 0 13%) 50% / 80% 80%,
    radial-gradient(#00f 22%, #0000 0),
    #fff;
  background-repeat: no-repeat;
  filter: blur(20px) contrast(50);
  box-shadow: 0 0 0 50px #fff;
}
Enter fullscreen mode Exit fullscreen mode

Blue splash over a white background

There are a couple of things worth mentioning in the code above:

  • We added a background-repeat: no-repeat to avoid the repetition of the smaller gradients. You could remove it and get a different splash.

  • I like using prime numbers for the repeating gradients because there are fewer collisions, and it’s more challenging to see the patterns.

And that’s it! Play with the sizes, the gradient stops, or the filter values, and you will get a completely different splash. Add additional filters to change the colors (which are restricted by contrast) and obtain new results. Get creative and have fun! And if you end up creating a demo for divtober, share it with me in the comments or on Twitter. I’ll be happy to see it.


Top comments (4)

Collapse
 
mckennabramble profile image
McKenna Bramble

Love this tutorial - thank you for sharing!

Collapse
 
alvaro_montoro profile image
Álvaro Montoro

Thanks for your comment! :)

Collapse
 
ezpieco profile image
Ezpie

I have been working with html and css for such a long time, but this is something I never got! Thanks for such a cool idea @alvaro_montoro

Collapse
 
alvaro_montoro profile image
Álvaro Montoro

Thanks for your comment! :)