CSS Clip Path to replace background images in your theme?

I absolutely love the power of CSS, maybe more than a coconut flavored Mexican Paleta… maybe.

I’ve been replacing background images whenever possible with Clip Path and CSS Gradients.  It is so much fun…

Use this for quickly creating Clip Paths of all sorts:

Use this to generate sweet CSS background gradients:

And use this for other fun CSS3 magic:

What the BOX-SHADOW!?

Recently I ran into a issue where I also wanted to apply a box-shadow to this ensemble.  And had it been possible, it would have knocked it out of the park for a grand slam.  However, regardless of the box-shadow styles I applied, they’d never show up.  Turns out it wasn’t just a weird local caching issue… the box-shadow only follows the shape of a rectangle and not a custom clip-path yet.  In my case, I didn’t have access to edit template files, so I settled without it right now.  But if you do have access to source code so you can effect HTML output, you could add another div and offset it to create that pseudo shadow.

Found this on stock exchange to be useful:


Leave a Reply