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
clip-path property allows us to display portions of an HTML element by masking it with a pre-defined polygon.
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 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.
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.
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.
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.