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.layerY
properties of the mousemove event
.

This example requires JavaScript to work as intended.

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