10 CSS Snippets for Creating Unique Background Effects

In modern web design backgrounds are big (both literally and figuratively). With the advent of HD (and now 4K) displays, designers create backgrounds that take up loads of screen real estate. Why? Because they make for an incredible visual impact and help to tell a story.

But there is so much more to backgrounds than simply throwing a photo or texture into a large space — a combination of CSS and the occasional bit of JavaScript power creating some fantastic special effects.

Let’s explore some of the unique ways in which designers are spicing up backgrounds. We’ll also include an example for each technique so that you can see exactly how they work.

CSS Blend Mode Color Change by Giana

This background effect is so cool that the fixed element on top appears to change color as the user scrolls. The use of CSS mix-blend-mode property allows for the change in hue, which is dependent upon the contents of the background.

See the Pen CSS background change on scroll by Giana

Scrolling Animation by Jonathan Marzullo

Reminiscent of side-scroll video games of the past, this technique features two distinct images – each scrolling in the opposite direction. It’s done with the help of CSS transform and some JS.

See the Pen GSAP Animate CSS background-position by Jonathan Marzullo

Skewed by Marcel

Skewed backgrounds are one of the hottest trends in web design. It’s an effect that was incredibly easy to implement in print design and a pain to do on the web – until now. This pure HTML/CSS solution makes it a cinch.

See the Pen skew bg by Marcel

Moving Pictures by Kevin Lesht

Using a fairly simple bit of CSS, this background allows for a smooth transition between multiple images. It makes for a much more lightweight slider than traditional JavaScript.

See the Pen Fullscreen CSS Background Image Slideshow by Kevin Lesht

Animated Gradient by Mario Klingemann

If not done carefully, an animated background can distract from any content sitting on top of it. This animated gradient example is nice because it’s a more subtle effect. Using JavaScript, you can define gradient colors to match your palette.

See the Pen Animated Background Gradient by Mario Klingemann

Blur on Scroll by Zach Richard

This technique could be quite useful when you really want visitors to focus on the background image (like the header of a news article) and then allow for the easy reading of text on top. A little bit of jQuery changes the background-size property upon scroll to create the effect.

See the Pen Zoom and Blur background Image by Zach Richard

Fade-in Hero Image with Overlay by Rand Seay

There are a few things going on with this example. First, a full-width hero image has a color overlay added on top to create a different hue. Then a fade animation is implemented to introduce the image in a visually smooth manner. Lastly, a parallax-style scrolling effect is added to the mix. The result is a very modern look that uses relatively little code (and no JS).

See the Pen CSS background image stacking with fade and overlay by Rand Seay

Background Zoom & Pan by Krz Szzz

Here’s an effect we’re seeing quite a bit lately. As the user hovers over a panel, the background image zooms in and pans along with any movements of the cursor. It’s an easy way to add some interactivity and maintain user interest.

See the Pen Zoom + pan the image on hover & mouse move by Krz Szzz

Reveal on Hover by Eric Karkovack

This example shows a split screen where the background is revealed based upon the position of the user’s mouse. Great for comparisons, like ‘before’ and ‘after’ shots.

See the Pen CSS Background reveal by Eric Karkovack

Color Change on Scroll by Jack Harner

Sometimes we forget how powerful the use of simple solid colors can be. Here, we see the impact it can make as background colors change based upon scroll position. This lightweight solution can be just as visually effective as heavy imagery.

See the Pen Changing Background Color on Scroll by Jack Harner

Backgrounds at the Forefront

Backgrounds are no longer just a means to frame content – they’re now often part of the content itself.

With so many interesting ways to utilize them, it’s worthwhile to experiment with various background techniques and see how they can enhance the user experience of your next project.