DEV Community

Cover image for The Golden Ratio in CSS
Mads Stoumann
Mads Stoumann

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Grid inspector

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

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

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;
}
Enter fullscreen mode Exit fullscreen mode

And now, we get this:

Fibonacci

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
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

This gives us:

Circles

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);
}
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

Now we get this:

Final

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 (45)

Collapse
 
rust_will_eat_the_world profile image
Nathan Stevens

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. :)

Collapse
 
madsstoumann profile image
Mads Stoumann

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.

Collapse
 
madsstoumann profile image
Mads Stoumann

This is without overflow:hidden — kinda beautiful!
Without overflow

Collapse
 
ezpieco profile image
Ezpie

Won't lie, this is better without over:hidden! This is kind of those things that look better by testing. Just like art in my opinion, you never know what would get cooked.

Collapse
 
madsstoumann profile image
Mads Stoumann

I like them both!

Collapse
 
drazenbebic profile image
Drazen Bebic

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?

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! I have a work-in-progress project with svg-based art generators, here’s one of them: browser.style/art/bauhaus/

Collapse
 
juliannicholls profile image
Julian Nicholls

Nice!

Collapse
 
adewole_tobi_f04c0a02bee0 profile image
Adewole Tobi

It looks so beautiful 😍

Thread Thread
 
madsstoumann profile image
Mads Stoumann

Thank you!

Thread Thread
 
365team_fe_7099245ac388c8 profile image
365Team FE

Nice

Thread Thread
 
365team_fe_7099245ac388c8 profile image
365Team FE

Nice

Collapse
 
humblehumans profile image
Gregory Edgerton

Beautiful implementation! Working on a golden ratio project where i've been hung up on a li + :nth-child approach with relative widths while still leverage CSS grid. I couldn't see through the haze of my ideas.

Picked the project back up two days ago after an inspiring meet-up poised to dedicate an hour a day. Had yet to look what was out there though, finally waved the white flag in search of others. I find myself inspired again.

Thank you for sharing.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks, happy to hear that! grid-area is the key here, at least for me, who like to “think in grids”.

Collapse
 
ricardogesteves profile image
Ricardo Esteves

Sooo cool this post/articles @madsstoumann. Was really nice to see your approach and how did you progress to the desired outcome!
There are so many interesting topics to experiment with, keep them coming!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you so much — I have a bunch of geometric art generators coming up!

Collapse
 
michaelthegamer profile image
Michael

What is even cooler is that the Golden Ratio Nautilus Effect (look up nautilus images to see what I mean), is that it is also seen in the human hand! Seriously, try it starting with the tip of your finger (usually index or middle work fine) and then measuring it to the next joint, and using a tape measure or even a ruler, measuring from fingertip to next joint then the previous joint to the next, to hand (well, wrist) and it goes to the shoulder. Think about it: another proof of order in what we are always told is random chaos. It's too much order. We are not random! Neither are we alone! Seek and you shall find!

Collapse
 
mince profile image
Mince

Awesome, 👍

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
mannuelf profile image
Mannuel

very cool

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
code_jedi profile image
Code_Jedi

Peak CSS creativity. Nice!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thx!

Collapse
 
ali_raza_52ff666176c99648 profile image
Ali Raza

great

Collapse
 
madsstoumann profile image
Mads Stoumann

Thx!