Neon colors… so bright, fun, unusual… both irritating and pleasing to the human eye. Surprisingly, even against the backdrop of web design standards, creators still use them in different combinations and variations in their projects. However, neon colors are difficult to work with without affecting the overall design. Yes, they are great for logos, icons, UI elements in apps, posters, and artwork—but with web design, issues arise unless you're aware of the key challenges and nuances.

Today we’ll explore effective ways to use neon (as both an effect and a color) in web design, look at examples from award-winning webmasters (Awwwards and CSS Design Awards), and see how Photoshop can help when working with neon colors.

All in all, let's try to become neon ninjas!

Lime Shade

Lime green is a bright example of a neon color (without a glow effect), a yellow-greenish hue that isn’t quite chartreuse yet.

Hex code: #32cd32

What’s special about this color is that when combined with a dark background, it creates a true neon effect. It looks lively and can attract visitors to a website. This is the simplest way to add neon to a web design without overwhelming the entire project. Examples include weather, limegreencreative, QQ Browser (for Mac), newKIS, Craftedbygc, Nvidia. All of them, to varying degrees, use bright green combined with a dark background, creating a visually appealing and time-tested effect.

Neon Rainbow

While many colors can be combined and used together daily, neon colors can’t easily create a cohesive color scheme. That’s because most neon colors share similar brightness and saturation levels, so they tend to blend on-screen and look the same. This leads to readability and contrast issues. That’s why web designers usually stick to one neon color against a more “neutral” background and surround it with muted tones.

Bold Decisions

Using neon as a fullscreen background is bold. Just bold. But it’s not something you’ll see on every other website. Still, it’s natural for artistic projects or variations that involve competition or space division between colors of different intensities.

Just be careful to keep all other elements on the screen minimal. Don’t make buttons an even brighter color or overdo the typography. Minimalism, flat design, simple typography, strict fonts, and a neon accent can create a more stylistic, elegant design.

Take a closer look at f37foundry, Funplex, Langlois, Glow Motion, NOEIN OI. They use paired colors, solid fills, or neon gradients.

Neon and White

Neon colors and white never mix well, as neon elements on a white background are practically unreadable. Many neon shades rely on white for their glowing effect, which causes a blown-out or overexposed look. Simply put: the neon glow mimics white light, and on a white background, it all just merges together.

Neon Branding

Some companies use neon shades as primary brand colors. For example, Nvidia uses a vivid lime green with black, AMD combines black, white, and intense red, Devillard opts for bright yellow with black, and MTN DEW x NBA uses neon green with muted tones. This makes web design easier, as the neon should be present, but in moderation.

Don’t dismiss this color. Instead, it’s much more effective to find suitable pairings and bring them to the foreground, while the background complements and highlights them. There’s no need to fill the entire background with brand neon; just use it to accent certain elements.

Beyond Effects

Neon on its own already offers remarkable creative possibilities. Avoid combining it with various effects (animation, 3D, parallax, etc.). In the end, you risk overwhelming users, clients, and even yourself. At first, it may seem fine—but later, your eyes will grow tired.

That said, we must acknowledge the finesse when effects are used so subtly and sparingly that they’re nearly invisible.

The project craftedbygc created an animated letter G that responds to cursor hover. Neon accents are used on buttons, borders, and other elements—but it’s so subtle that it looks elegant.

Or the Wild Side website, which features a neon gradient and photo filter. The animation allows you to move the background and observe the blur. Note that the text remains readable and the animation is so slow you may not notice it right away.

Neon Accents

Unique elements like buttons, icons, indicators, and lines can draw visitors’ attention to key features. That’s why neon should be used in small amounts in web design. Add dots, splashes, subtle patterns in the background, or a button border. But remember: neon only works visually when there’s strong contrast with the background. That’s why it’s commonly paired with black (or dark tones), not white.

And yes, text should never be created with a glow effect. For posters, photos, or logos—maybe. But not for website text—it looks annoying and disorienting. You may use bright colors, but not neon glow. For example: eaglefilmsme, London Under the Microscope, 32 Guersant, nobumitsu, ameliarthompson, devillard.

Creating Neon Glow

Neon effect or Glow is nothing new. It's just glowing color, often seen on signs at night. When aiming for realism in Photoshop, the glow gives the impression that the color emits light, almost as if white passes through it. Be careful not to overdo the glow—just a subtle one can elevate your web design.

Another option is animation that causes a glow when the cursor hovers over an element. This can help hold the user's attention.

Neon colors can bring a site to life and even "lift" certain elements, creating depth and layering. In this case, neon shouldn't overpower the main palette. The essence of neon lies in the glow, not saturation. It can be pale pink or bright yellow.

Here are some more great examples of neon in web design: We Craft Apps, Zaha Hadid, DERIVE, Sidewalk Labs, creativecats, adaptable, DDD2017, bigomaha, ReNa. A lot, but each one is unique and beautiful in its own way.

Using Photoshop

The easiest place to use neon effects is the background. Suppose we have a dark background and want to add texture instead of a plain fill. Neon colors can be used for subtle flares, wave outlines, or botanical elements. They can be soft or slightly toned—and look really nice. You’ve already seen examples above. For illustrated backgrounds (e.g., an architectural site), you can highlight certain objects with neon.

Let’s look at how it's done.

We took a sample design (you might recognize it), where the logo and button borders already use a neon effect. Borders are created similarly to what we’ll show. Now let’s add something to the header background… Our logo uses two light tones: #49A3CC and #53C3BF. We’ll work with those.

Create a new layer, fill it with a color or gradient, and add another transparent layer on top. The background layer is for convenience and won't be copied.

Select the Pen Tool, place a point, then a second one, and without releasing the mouse button, move the cursor to create a curve. Adjust as needed. Add another point and adjust it too. Once the curve is complete, use Add Anchor Point Tool (in the same Pen Tool set) to refine the path.

Now switch to the Brush Tool, choose one that makes your line look like a soft stroke. You can create another effect too. The brush should be small—glow will add thickness later.

Once the brush is ready, go back to the Pen Tool. Create a new empty layer and right-click the path → Stroke Path. In the dialog, select Brush and Simulate Pressure. Brush color doesn’t matter. We used yellow. Then right-click again and choose Delete Path.

Now, time to add the Glow.

In the Layers panel, right-click the stroke layer → Blending Options. Let the creativity begin.

We’ll use Outer Glow with the lightest logo shade: #53C3BF, set to Screen mode with low Opacity.

Then add Inner Shadow with Color Overlay and use the second logo color: #49A3CC. You can also try the Color blend mode.

Finally, do some light toning—it’s too bright otherwise. Use Color Overlay with dark green. Experiment with blend modes—it’s fun!

Done. Copy this final stroke layer into your main project—stretch it across the background or highlight the menu/logo line. Looks good, and it’s easy. Neon may seem tricky, but creating effects like this is simple. You can even adjust to project colors, brighten or tone it down, make it thinner… so many possibilities.

With this simple technique, you can highlight any element, part of a background image, or add decorative touches—and, of course, flex your creativity!

Conclusions

Today’s neon effects have little in common with 1980s neon, even though they originated there. The key now is choosing neon that fits modern design, minimalism, and calm color schemes. Neon should highlight key parts of a site and guide users to important actions.

Neon colors can be both fun and subtle—sometimes barely noticeable. The most important thing is harmony with the overall palette and project theme. Only then can a project have a truly satisfying finish.

Neon is widely used today, even by major brands. You just have to learn where and how to spot it.