Mads Stoumann

Posted on Sep 25

The Golden Ratio in CSS

#css #webdev #showdev #tutorial

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:

Top comments (17)

Nathan Stevens • Sep 26

Now THAT is interesting. I want more of this!
There's way too many listicles on this site.

Every day there's a dozen posts about top 20 tools to bring back your loved ones from the dead or something at the top of the lists.

Same rehashed stuff.

This is what I want more of.
And if there's a better place for things like this, please recommend. :)

Mads Stoumann • Sep 26

Thank you! You can take a look at some of my earlier posts — recently, I wrote about the solar system and the periodic table in CSS grid.

Drazen Bebic • Sep 26

That is a very creative project, Love it!

This got me thinking: If you can find a way to maybe randomize patterns, streaks, colors, etc., you could programmatically create abstract art. Could also be using the HTML canvas tag instead of CSS. Not sure if something like this already exists?