How To Make Fun Gradients

General Process

First, I started 300 by 300 pixel box. Then I experimented with different proportions when using 4 linear gradients in a single background. Next, was the idea to put them into gradually smaller boxes.

Replacing the pixel values with percentages helped to reduce the amount of repeatition. And I did the same the boxes themself. The actual values were a result of my good friend trial and error!

In Depth Explanaition of how to make these and how they work

Getting the gradients right

These shapes use four linear gradients. that all have the same volume.

background-image: linear-gradient(to right,purple,blue), linear-gradient(to top,purple,blue), linear-gradient(to left,purple,blue), linear-gradient(to bottom,purple,blue);

I define them as percentages, here with a ratio of 1:9.

background-size: 90% 10%, 10% 90%, 90% 10%, 10%;

With the help of the keywords 'top left', 'top right', 'bottom left', and 'bottom right' it was easy to anker them to the edges of their squares.

background-position: top left, top right, bottom right, bottom left;

Just gotta combine it all in one class! (Also making sure these things don't repeat.)

.linear-gradient { background-image: linear-gradient(to right,purple,blue), linear-gradient(to top,purple,blue), linear-gradient(to left,purple,blue), linear-gradient(to bottom,purple,blue); background-size: 90% 10%, 10% 90%, 90% 10%, 10%;
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat;
}

Making the final shapes

The outer box for each of the shapes had a fixed size.

.box-300 {
position: relative;/* this ensure that the boxes are positioned relative to this container*/
display: inline-block;
width: 300px;
heigth: 300px;
}

Then for the inner ones I used percentages! Both for their size (80% for finer ones, 33% for the granular ones) and their position. top: 10%; and left: 10%; ensured that they would be positioned at the empty inner space each individual shap made.

.box-80-percent {
position: relative;
display: inline-block;
top: 10%;
left: 10%;
width: 80%;
heigth: 80%;
}

Lastly I made a container for them. And gave that one a flex display. So that they would be nicely aligned besides each other! (Otherwise there would be really weird offsets to the other ones!)

.container { display: flex; }

Of course, now the only left is to put them into the html! (Only 3 layers deep here, put you could easily add more divs!)

<divclass="container"> <divclass="linear-gradient box-300"> <divclass="linear-gradient box-80-percent"> <divclass="linear-gradient box-80-percent"> </div > </div > </div > </div >

Radial and Conic, Repeating too

Gonna be honest, my understanding of these radial conic ones is a bit basic. Which is way I didn't really put in too many examples of them. I might write more here in the future.

Back to the top