Fancy Neon Text Effects with CSS

Published:

Last updated:

This article describes how CSS can be used to make text look like neon signs. For an example, check out my CodePen showcasing this effect.
The neon effect mostly is achieved by using the CSS property text-shadow with multiple layers and a saturated colour, combined with some CSS animations to make it look more realistic.

The most important part is the text-shadow - we won’t use it for an actual shadow but for the blurred colored glow effect of the text. Each line in the value represents one of the radiuses of the glow (e.g. The first part of the value creates a ‘shadow’ with a 10px radius). In most cases we want the inner shadows to be a brighter version of the colour or even white, while the outer ones have the a less bright version of the color.

Read 'Fancy Neon Text Effects with CSS'

Creating Oscillators with JavaScript

Published:

Last updated:

The Web Audio API is a JavaScript API supported by all modern browsers. It allows for complex audio operations in JavaScript, such as creating oscillators, routing audio sources, or applying audio effects.

As a demo, you can check out my collaborative web synthesizer using websockets.

Initializing the Web Audio API

In order to use the Web Audio API, we first have to create an AudioContext. You can think of it as a graph which defines how audio signals travel between nodes, or for simple use cases, as a “pipeline” where one audio signal e.g. from an oscillator travels through some nodes to an audio output.

Read 'Creating Oscillators with JavaScript'