How To Make Funky Shapes with Background Images

This is the kinda stuff we're gonna make today!

How make these shapes (using linear gradients as example)

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 >

And of course this same thing can be done with any type of background image! Try it out yourself!

How to transform your funky stuff Basics of making a website
Back to the top