Shapes, shadows, gradients!
3 CSS generators to help you achieve that edgy look
How do we create shapes and give it colour and depth in CSS?
CSS can be hard sometimes when you don’t have a visual on the properties you are defining. But not to worry, creating custom elements with pure CSS can be 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.
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 us with a wide array of regular shapes to choose from. By dragging and shifting points on the visualiser, we can also create complex shapes easily. Simply copy the generated CSS into your stylesheet and you’ll be 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-shadowin 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 wanted 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 of 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!