Web design trends are not always a nod to what is new. Take the popularity of the Synthwave aesthetic. It dates back to the early 1980s – even years before the world wide web was invented.
It is gaudy and practical. But it’s hard to deny the magic and the nostalgia feelings that come to light. For me, it conjures images of Miami Vice, big hair, and the artificial sounds of new wave music.
For web designers, Synthwave provides a great playground for experimentation. It is a place to work with color, create animation, and add interactivity. While fun is on the surface, it’s a way to learn and sharpen one ‘s skills further.
So put on your cool shades, pop up your shirt collar, and explore Synthwave’s super-cheap clips. CSS and JavaScript never looked that… pink!
For the Future and Jane
For those who are not a beginner, this section is a great example of what Synthwave is all about. The sky a pink-to-purple gradient, the sun shining in the distance, and a grid-like earth. This homage was built with CSS and has a vertical stripe pattern that looks almost motionless when you point inwards.
Look at the Pen on the future 🍻 by Jane
CSS Synthwave by Sacha Van den Wyngaert
This twist on the trend has a classic sci-fi feel to it. It uses CSS transformations to mimic navigation through a high-tech 3D masterpiece. While we have no idea what’s on the other side, it’s definitely a cool place to visit.
Take a look at the CSS Synthwave Pen by Sacha Van den Wyngaert
Synthwave High View and Radik
Let’s take this to the next level. Imagine you are driving a spaceship, hovering over the surface of a future planet. Or maybe you are watching a movie on old school TV. The fuzzy, wobbly JavaScript – powered movements perfectly recreate the experience of hhuddling around a small screen back in the day.
Take a look at the Advanced Synthwave Scene Pen by Radik
Synthwave Inspired the ltrademark
Aside from the grid lines and bright colors, retro typography is also a key ingredient of Synthwave. The two-toned sparkling title in this clip would fit into a MTV vintage broadcast. Maybe it could be a segue for the hot new Prince video?
Take a look at the Synthwave Pen inspired by ltrademark
It’s Disco Time! by Rémi Lacorne
Despite the title, the disco is not the same as Synthwave. But I won’t be too upset, as this neon text effect is awesome. The use of CSS transformations adds to the perspective of the text, and the colorful lasers on the right are faithful 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” piece might be better. It offers the basics without being too busy. For those who like this aesthetic, the design would work well as a title page and / or a hero area.
Take a look at the Lofi Synthwave Pen by Vincent Tang
Synthwave Road by Pierre Darrieutort
Oh, that beautiful grid. Here it is placed on an infinite loop and make your animated background fun. It is also lightweight, thanks to its pure CSS construction.
Look at the Pen Synthwave road by Pierre Darrieutort
Text Neon Flickering Single Div by Annie
Want to combine the Synthwave vibe with a more modern look? This fragment gives you the best of both worlds. The retro colors are reworked, and the flickering neon text still evokes an 80s feel. Think of it as a new and improved twist on a favorite old man.
Check out the Neon Text Flickering Neon Pen by Annie
Going Back in Time, Looking to the Future
Even if you have not yet been born in the last decade, you may have been influenced by the 1980s style. After all, fashion is cyclical. And it does itself at home on media that wasn’t around when the original was fresh. The number of Synthwave-related designs we have seen on the web is a testament to that.
What makes this even more fun is that designers are using the latest tools and techniques offered by CSS and JavaScript. In a way, it helps to make something old feel new again.
Need even more retro vibes? Head over to our CodePen collection for a full list of Synthwave times.
