8 CSS & JavaScript Snippets That Celebrate Synthwave

Web design trends aren’t always a nod to what’s new. Take the popularity of the Synthwave aesthetic. It harkens back to the early 1980s – years before the world wide web was even invented.

It’s gaudy and impractical. Yet it’s hard to deny both the charm and the feelings of nostalgia it evokes. For me, it conjures images of Miami Vice, big hair, and the artificial sounds of new wave music.

For web designers, Synthwave also provides a great playground for experimentation. It’s a place to work with color, create animation, and add interactivity. While fun on the surface, it’s a means to learn and further sharpen one’s skills.

So, put on your cool shades, pop up your shirt collar, and explore super-rad Synthwave snippets. CSS and JavaScript have never looked so…pink!

To the Future by Jane

To the uninitiated, this snippet is an excellent example of what Synthwave is all about. The pink-to-purple gradient sky, the sun shining in the distance, and grid-like earth. This tribute was built with CSS and features a vertical stripe pattern that, when you focus in, almost looks like it’s moving.

See the Pen to the future 🍻 by Jane

CSS Synthwave by Sacha Van den Wyngaert

This spin on the trend has a classic sci-fi feel. It utilizes CSS transforms to mimic navigating through a high-tech 3D superhighway. While we have no idea what’s on the other side, it sure is a cool place to visit.

See the Pen CSS Synthwave by Sacha Van den Wyngaert

Advanced Synthwave Scene by Radik

Let’s take this to the next level. Imagine you’re driving a spacecraft, hovering over the surface of a futuristic planet. Or perhaps you’re just watching a movie on an old-school TV. The JavaScript-powered wobbly, blurred movements perfectly recreate the experience of huddling around a small screen back in the day.

See the Pen Advanced Synthwave Scene by Radik

Synthwave Inspired by ltrademark

Beyond the gridlines and bright colors, retro typography is also a key ingredient of Synthwave. The sparkling two-toned title in this snippet would fit right into a vintage MTV broadcast. Perhaps it could serve as a segue to that hot new Prince video?

See the Pen Synthwave inspired by ltrademark

It’s Disco Time! by Rémi Lacorne

Despite the title, disco and Synthwave aren’t the same things. But I won’t get too upset, because this neon text effect is awesome. The use of CSS transforms adds perspective to the text, while the colorful lasers on the right are true to the era.

See the Pen It’s disco time! by Rémi Lacorne

Lofi Synthwave by Vincent Tang

If Synthwave comes on a little too strong for you, this “Lofi” snippet may be a better fit. It offers the basic elements without being too busy. For those who want this aesthetic, the design would work well as a page title and/or hero area.

See the Pen Lofi Synthwave by Vincent Tang

Synthwave road by Pierre Darrieutort

Oh, that beautiful grid. Here it’s placed on an infinite loop and would make for a fun animated background. It’s also lightweight, thanks to its pure CSS construction.

See the Pen Synthwave road by Pierre Darrieutort

Single Div Flickering Neon Text by Annie

Want to combine a Synthwave vibe with a more modern look? This snippet gives you the best of both worlds. The retro colors are given a makeover, while the flickering neon text still gives off an 80s feel. Consider it a new-and-improved spin on an old favorite.

See the Pen Single Div Flickering Neon Text by Annie

Going Back in Time, While Looking Toward the Future

Even if you weren’t yet born in the decade, the style of the 1980s has likely influenced you. After all, fashion is cyclical. And it makes itself at home on mediums that weren’t around when the original was fresh. The volume of Synthwave-related designs we’re seeing on the web is proof.

What makes this even more fun is that designers are utilizing the latest tools and techniques that CSS and JavaScript have to offer. In a way, it helps to make something old feel new again.