The Golden Ratio in CSS

The golden ratio, also called the golden number, golden proportion, or even the divine proportion, is a special relationship between two numbers that equals approximately 1.618. It’s often symbolized by the Greek letter "phi." What’s fascinating is how closely this ratio is tied to the Fibonacci sequence—a series of numbers where each number is the sum of the two before it. The Fibonacci sequence starts with 0, 1, and then continues: 1, 2, 3, 5, 8, 13, 21, and so on. As you move further along in the sequence, the ratio between each number and the one before it gets closer and closer to 1.618, or phi. This unique ratio shows up in nature, art, and architecture, making it both mathematically intriguing and visually pleasing!

In this tutorial, we'll re-create the Golden Ratio Diagram in CSS, using a few grid-declarations and some additional tricks.

Let's get started!

We'll use this part of the Fibonacci-sequence:

1, 1, 2, 3, 5, 8, 13, 21

That’s 8 digits, so our markup will consist of an <ol> with 8 <li> elements.

In CSS grid, we'll create a canvas with the dimensions derived from the sum of the last two digits, 13 + 21 = 34, for the width, and the largest digit, 21, for the height:

ol {
  all: unset;
  display: grid;
  grid-template-columns: repeat(34, 1fr);
  grid-template-rows: repeat(21, 1fr);
  list-style: none;
}

Not much to see yet, but if we enable Dev Tool´s Grid Inspector, we can see the grid:

Next, we'll add some common styles for the <li>-elements:

  li {
    aspect-ratio: 1 / 1;
    background: var(--bg);
    grid-area: var(--ga);
}

Still nothing to see, so let's fill out the --bg (background-color) and --ga (grid-area) variables with some content:

&:nth-of-type(1) {
  --bg: #e47a2c;
  --ga: 1 / 1 / 22 / 22;
}
&:nth-of-type(2) {
  --bg: #baccc0 ;
  --ga: 1 / 22 / 23 / 35;
}
&:nth-of-type(3) {
  --bg: #6c958f;
  --ga: 14 / 27 / 22 / 35;
}
&:nth-of-type(4) {
  --bg: #40363f;
  --ga: 17 / 22 / 22 / 27;
}
&:nth-of-type(5) {
  --bg: #d7a26c;
  --ga: 14 / 22 / 17 / 25;
}
&:nth-of-type(6) {
  --bg: #ae4935;
  --ga: 14 / 25 / 17 / 27;
}
&:nth-of-type(7) {
  --bg: #e47a2c;
  --ga: 16 / 26 / 17 / 27;
}
&:nth-of-type(8) {
  --bg: #f7e6d4;
  --ga: 16 / 25 / 17 / 26;
}

And now, we get this:

Cool! So what happened? We gave each <li> it's own background-color using the --bg custom property. Then we used grid-area to place and size the rectangles within the grid. grid-area is a shorthand for:

row-start / col-start / row-end / col-end

Now, how about creating the spiral effect? While CSS can’t directly draw spirals, we can fake it by adding circles as ::after pseudo-elements on each <li>:

li {
  /* as before */
  overflow: hidden;
  position: relative;

  &::after {
    aspect-ratio: 1 / 1;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50%;
    content: '';
    display: block;
    inset: 0;
    position: absolute;
  }
}

This gives us:

Not quite there yet, but if we double the size of the circles and translate them slightly, it starts looking better:

&::after {
  /* as before */
  scale: 2;
  translate: var(--tl);
}

However, not much changes until we update the --tl (translate) property for each <li>:

&:nth-of-type(1) {
  --tl: 50% 50%;
}
&:nth-of-type(2) {
  --tl: -50% 50%;
}
/*  and so on for the rest */

Now we get this:

What happened here?

We created a circle double the size of its element, then used translate to shift the circle in different directions to give the appearance of a continuous spiral. By adjusting the translation for each element, the circles "flow" into one another, mimicking a spiral.

Finally, because we added overflow: hidden to the <li> elements, the circles are "cut off" when they overflow their containers, giving us the illusion of a perfect spiral!

Here’s the finished result in a CodePen: