3 CSS generators to help you achieve that edgy look

By Soke May

How do we create shapes and give it colour and depth in CSS?

CSS can sometimes be hard when you don’t have a visual on the properties you are defining. But not to worry, creating custom elements with pure CSS is easier than it looks with these tools!

1. Shaping it up with Clip Path

The CSS clip-path property allows us to display portions of an HTML element by masking it with a pre-defined polygon.

Image credit: Codrops

This is useful for creating regular shapes like circles, triangles, parallelograms, and even custom polygons to give your website that funky edge.

Clippy CSS clip-path maker

Clippy CSS clip-path maker provides you with a wide array of regular shapes to choose from. By dragging and shifting points on the visualiser, you can also easily create complex shapes. Simply copy the generated CSS onto your stylesheet and you’re good to go!

As a learning exercise, it’s useful for those new to the clip-path property to notice how the generated CSS changes as the points move.

2. Make it pop with Box Shadow

Creating shadows, or box-shadow in CSS terms, is a great way to give your element the illusion of depth.

Box Shadows: Read more here

This handy tool by CSSMatic makes it easy to visualise shadows generated as you change the colour, blur, and spread properties of box-shadow. It also takes care of browser-specific prefixes.

CSSMatic’s Box Shadow CSS Generator

3. Mix it up with Colour Gradients

Displaying single colours in CSS is as straight-forward as specifying the hex code or rgb value of the colour.

But what if you want to create linear (linear-gradient) or radial (radial-gradient) colour gradients?

Now you can, with a little help from the Ultimate CSS Gradient Generator.

Ultimate CSS Gradient Generator

This tool allows you to create points in various positions on the colour map. Each point denotes a colour which you can choose using the in-built colour picker. You can even create radial, diagonal, vertical or horizontal gradients by changing the orientation of your gradient.

Got more CSS tools?

This wraps up the 3 must-have tools in my web development toolkit for creating complex HTML elements. Feel free talk about your favourite CSS generators and tools here!


This article was first published on Medium.

Leave a Reply