Custom text shape

April 28, 2020 By Temani Afif

Getting bored with the classic rectangular shapes containing text? find below some fancy shapes that will blow your mind . No SVG or JS involved, all done using CSS!

I will be using shape-outside and some gradients. Make sure to check the browser support

https://caniuse.com/#feat=mdn-css_properties_shape-outside

https://caniuse.com/#feat=css-conic-gradients

Below some screenshots to see the result of the different shapes in case you are using a browser that doesn’t support the above code.

CSS corset text shape

CSS circular text shape

CSS droplet shape with text using shape outside

CSS panel text shape

CSS paper text shape