The neon glow effect on a website

The glow surrounds a title, or the edge of a button, with a halo in the site’s accent color, like a neon sign in a street at night. It needs an object: in the studio’s library, it applies to a specific element, because a glow that surrounds nothing is just a colored veil.

Liquid care, slow gestures.Without

Liquid care, slow gestures.Glow

On the demo, the white title stands out against the dark poster in an ember-colored halo, this showcase’s accent.

Where the effect comes from

Neon is a rare gas, invisible until it is sealed in a glass tube and subjected to high voltage: it then lights up in a color of its own. The Frenchman Georges Claude turned it into lighting. In December 1910, at the Paris Motor Show, he lit two tubes about twelve meters long on the building’s colonnade, in a brilliant orange-red. The first neon advertising sign lit up in 1912, on boulevard Montmartre, at a barber’s. By mixing gases and tinting the tubes, manufacturers then obtained more than forty colors; argon, for example, gives violet (Science History Institute, 2012).

At night, around a lit sign, the light seems to spill out of the tube. Computer graphics imitate this spill under the name bloom: in Unity, the effect makes fringes of light extend from the edges of bright areas, to give the illusion of light so strong it overwhelms the camera (Unity). The web’s glow is its simplest version: a blurred, colored shadow, with no offset.

When to use it

None of the studio’s twenty-four ready-made layouts applies it by default. It suits the places and trades of the night and the stage:

• a bar, a club, a concert venue, a label;
• a party, a festival, an event that starts after sunset;
• an arcade, an escape room, a barber, as a nod to the first sign;
• a tattoo studio, a food truck that serves late.

The library provides two uses. On a title, the glow surrounds the letters. On a border, its variant surrounds a card or a button: it is the most direct way to highlight the call-to-action button on a dark page.

It is better left out:

• on a light background: a halo needs dimness, and on white it looks like a stain;
• with the paper texture: fiber and neon come from two worlds, and one makes you doubt the other;
• on all titles at once: if everything glows, nothing stands out anymore;
• for a trade that reassures through restraint: a notary, a medical practice, an accountant.

The right dose

The glow takes its color from the site’s accent: it always belongs to the palette. In the library, it consists of two shadows laid on top of each other, with no offset. The first, blurred over 18 pixels, mixes 55% of the accent color with transparency and draws the tight halo. The second, two and a half times wider, at 28%, makes the diffusion around it.

The border variant lays an outer shadow of 18 pixels at 38% of the accent, a lighter inner shadow, and tints the border itself at 60%.

A dark accent, a navy blue, a burgundy, gives a glow that barely shows on a dark background; a vivid accent, an orange, a pink, an acid green, makes it sing. Choose the accent color with it in mind.

The library applies only one treatment at a time. Textures can be added on top, two at most. Be careful with halation, which also makes the accent color radiate: together, they double the light, something to reserve for pages that embrace the night.

What it costs

Little, as long as it stays in its place. A blurred shadow costs more to paint than a sharp shape: anything that requires a blur takes longer (web.dev). On a title and a button, the difference isn’t felt. On dozens of cards at once, you pay for it.

Above all, the library’s glow doesn’t move. A neon that “breathes”, with its blur or color varying, would force the browser to repaint the title every frame: it only cheaply animates a layer’s position and opacity (web.dev).

Accessibility

• Contrast. A halo behind text changes the background it is read against. The W3C specifies: a wide outline, which fills the hollows of the letters, counts as a halo, and so as the background. Measure the contrast between the letter and its glow, where it is densest: at least 4.5 to 1 for body text, and 3 to 1 for a large heading (W3C, WCAG 2.2). A white title in a light halo quickly loses what it had.
• Reduced motion. The glow is still. When the visitor asks their device for less animation (prefers-reduced-motion), the library has nothing to remove.
• No flashing. A buzzing, flickering neon is a tempting cliché. On a page, a light that flashes more than three times a second can trigger seizures in photosensitive people, as well as migraines and dizziness (W3C, criterion 2.3.1). The library’s glow never flashes.

How it is made

Two text shadows, text-shadow, with no offset and a blur: the bigger the blur, the wider and paler the shadow (MDN). Their size depends on a variable, --lueur, set to 18, and their color is a mix of the accent color and transparency:

.m-lueur {
  text-shadow:
    0 0 calc(var(--lueur, 18) * 1px)   color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 calc(var(--lueur, 18) * 2.4px) color-mix(in srgb, var(--accent) 28%, transparent);
}

The border variant does the same thing with box-shadow, which also accepts an inner shadow thanks to the inset keyword (MDN):

.m-lueur-bord {
  box-shadow:
    0 0 calc(var(--lueur, 18) * 1px) color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 0 calc(var(--lueur, 18) * .8px) color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

In the studio

The glow is one of the library’s three treatments, kept apart from the ten textures: it sits on a chosen title or border, instead of covering the page. It has no step of its own in the flow, and none of the twenty-four ready-made layouts applies it by default.