Evolved from the Geissler tube, the neon sign was a characteristic trait of America from the 1920s to the ’60s. It has marked several decades and created its own distinct era – an era of bright, colorful nights with neon marquee signs on every corner.
Without a doubt, the neon sign is a thing from the past. It is synonymous with retro style. But it is not as dull as the archaic stuff from the good old days. It has a zest; it has a vibe. Its colorful nature and bright personality keep it alive.
And even though the tendency of using neon signs is dying in real life, giving way to more sophisticated and elegant “green” solutions, there are still places to see it in the online expanses. This is where it can bring its charisma into play. And given the fact that a wave of nostalgia has swept the world, a neon sign can become an ideal candidate for creating designs that meet the mainstream of today.
There are several ways to introduce a retro fluorescent touch into your interface. The most obvious and easiest one is to use it as a stylistic choice for showing nameplates, taglines or just the text-based details of a website. Today, we are going to show you some excellent code snippets that bring this effect to life.
The Complete Toolbox for Web Designers
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
Both Nodws, with his fantastic Dribble-dedicated project, and Riccardo Tartaglia, with his outstanding Neon from Las Vegas, have taken a traditional route. They’ve come up with concepts that perfectly imitate conventional neon street signs.
The demos look alike. Each one features neon signs placed against a brick wall. Both are enriched with tiny dynamics to make the scene look alive; and each has a bright appearance. The artists managed to get by on just several lines of HTML code and CSS, making the solutions not just eye-pleasing – but also lightweight.
If you need an unmistakable vintage feel on your website, you should try Vintage Neon Sign by Kyle Lavery. It exudes the ‘60s on all fronts. Outlined typography, spiced up with neon coloring and supported by a beautiful tube-styled background looks fantastic. Even though the lettering isn’t set in decorative type, it will undoubtedly add some fancy feel to any project.
Okay, that’s enough of the text effects. Let’s consider some other ways of adding some fluorescent magic to the interface. One of the alternatives is to apply a neon style to loading animations, as Mai El-Awini has done with Neon Grid Loaders.
Here you will find four different loaders that are tied with one theme and coloring. Even though they are primitive, the neon effect certainly takes them to the next level. Against a dark background, they look simply fabulous. They will entertain visitors while they are waiting for your website to finish all its preparations.
Other interface details can also benefit from the neon style. For example, consider buttons. Since “ghost” calls to action are still popular, the neon effect just could not be a better fit.
There are two excellent code snippets to try out: one is made by Simone and another one by Elwin van den Hazel. Both of them include a simple, yet elegant and subtle neon button. While the first one is a bit gloomy due to muted coloring, the second certainly catches an eye immediately with its vibrant blue tone and glowing effect. Everything is made with pure HTML and CSS.
You can apply the neon style to dialog boxes as well. Just take a look at Neon Dialog Boxes by Hugo DarbyBrown. The author has included four conventional dialog panels. They look bold and attractive, yet without screaming on all fronts. The neon effect has given the banal UI elements a nice twist.
neon hexagrid by Matei Copot / Neon Hex Particles – Recreation by Brett / for a while by Gerard Ferrandez
While we consider neon styles as an effect that can be applied to standalone details of a website (like buttons, typography or a loader), it can easily make a killer background as well. Consider neon hexagrid by Matei Copot, Neon Hex Particles – Recreation by Brett and for a while by Gerard Ferrandez.
Matei Copot offers online visitors a fantastic neon-inspired honeycomb-style background where each cell has its own lifespan. The coloring changes from purple to turquoise and looks inspiring.
Brett’s concept has a note of mystery. It is also based on a hexagon shape, yet this time you can also see a reveal animation. The pattern appears in the center and grows to the sides. There is a control panel where you can play with settings.
Unlike the previous two examples, the project by Gerard Ferrandez features a modern take on the neon style. Here you will find thousands of small particles that form a rectangle. Use your mouse cursor to disturb the flat surface and raise a wave that is marked by golden neon-like tone.
While the neon effect does not do anything unusual, it is still one of those things that instantly catches an eye. It is a great tool to make the details of a website more prominent.
It can be used to set focal points or just spice things up a bit with the bright charisma of fluorescent nature. It goes perfectly well with typography, buttons, and even backgrounds.
Yes, it has one big drawback – it reveals its beauty and potential only in a dark environment. So, if you are using a lighter UI, then it is not the best choice. But if you have some dark designs in mind, then the neon effect can become a perfect instrument for impressing your visitors.
- Boom! Examining Explosions in Web Design
- A Look at Text Distortion Effects in Web Design
- 10 Incredible Text Masking Effects Examples
- Code as an Ode to Hackers
- 10 Dramatic Examples of Splash Screens in Web Design
- Harnessing Liquid Effects in Web Design
- 8 Stunning Examples of the X-Ray Effect in Web Design
- Beautifully Designed Examples of Asymmetrical Split Screens in Web Design