You must have seen many front-end developers posting the beautiful arts they created using only CSS on social media, and if you're a newbie in CSS then it is very natural to be bewildered and think "There is no way one can make this using JUST CSS!" But believe me, creating CSS arts is not as difficult as it seems, in fact, it's quite easy and fun.

Why create CSS arts?

Although creating CSS arts is generally of no use in the professional life of a developer, but it is a great way of practicing CSS and getting an idea of the various concepts and features the language has to offer and is quite fun and it also draws a lot of eyeballs on social media, so ..... why not?

The "HOW"

"Ok I get that, creating CSS arts is fun and all and is a good source of practice, but how do I actually make that stuff? !"

Don't worry, I've got you covered.

The most important part of creating CSS arts is to be thorough with the basics of CSS and knowing most of the important properties.

Some of these include margins, padding, positioning,box-sizing, transforms, gradients, and colors to name a few.

Some of the important properties you should be aware of are:

z-index, border-radius, transform-origin, opacity, overflow, clip-path etc.

I would recommend you to learn all these basics from any website or youTube channel you're comfortable with.

Secondly, you should know how to create some of the basics shapes using CSS which might help you in breaking down the more complex shapes into simpler forms.

Let's do the shapes part in detail, shall we?

Let's start with a Circle. For creating a circle, you simply have to create a div with the same width and height and set the border-radius to 50%. Easy isn't it? Here's an example from code pen

Now let's create a triangle. This can be a bit confusing at first but don't worry, nothing is too difficult.

For creating a triangle, you have to make a div of zero width and height and make three of its borders transparent and one with a solid color.

Here's an example

I know you might be wondering that how did that actually work? But don't worry, I've made a little animation for you that might help you understand.

Now that we know how to create a triangle, let's also create a hexagonal star using the same concept. For that, all you have to do is create two triangles, one facing the top and the other facing the bottom, and place them over one another.

For this example, I'll be using a pseudo-element and I strongly recommend learning that first because it is a very important topic in CSS

That's all for this article, I hope I was able to explain something valuable to you through this.

I would love to have some feedback from you guys in the comments section below.