CSS Gradients

I've been following the CSS in-depth course by Estelle Weyl on Frontend Masters to learn much of this stuff. I recommend you go check out her work. The slides she use while teaching comes with a bunch of examples and playgrounds and are available on her website.

Radial Gradients

Mimicking a vinyl record

As a demo of a radial gradient I figured I wanted to make a CSS version of a vinyl record.

I started out with a simple radial gradient with just the main blocks of color.

A non-repeating radial gradient mimicking a vinyl record

Expanding on the simple version and making use of the ability to have multiple background images I made a version where a regular radial gradient is in charge of rendering the non-repeating parts of the record and a repeating radial gradient renders the body of the record with grooves.

Two gradients together mimicking a vinyl record with grooves.

Repositioning using JavaScript

I wanted to see whether I could create a neat effect using a radial gradient and JavaScript by having the gradient react to the mouse cursor on desktop.

The solution is pretty straight-forward, with one caveat: the element showing the gradient should be position: relative;. This lets you use the event.layerX and event.layerYproperties of the mousemove event.

A radial gradient hooked up to a JavaScript event listener that changes the gradient position based on the cursor position.