Category: Misc

Tips, Scripts, Tools, Bookmarks, and Inspiration for Web Designers and Developers.

Pure CSS Gradient Background Animation

Here is a demo with CSS code for gradient background animation using CSS only. This animation can prove valuable in places like hero sections, cards, and hover states of buttons. This animation will make them look alive and attract user attention. You can create your...

How to create an SVG animation with CSS?

Misc

Hey guys, I really needed to put this awesome video post by Dev Ed as he demonstrates step by step method to create an SVG animation with CSS. Here are the steps I noted: Step 1 – get your SVG image ready by editing it on Figma or any other SVG editor by...

Creating a blur effect using CSS – backdrop-filter property

Misc

The following video starts where the author demonstrates how he is adding a blur effect to elements using CSS – backdrop-filter property. More about blur effect –...

CSS feature query – @supports

Misc

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group...

Color Blinking – CSS Animation

Misc

Color Blinking – CSS Animation This is a simple example of how to create CSS animations. You can use any CSS property inside the {} curly braces to get desired effects. Demo Open demo in a full window –...

CSS clip-path generator tool

Misc

Screenshot of the CSS clip-path generator tool Check out this cool online CSS tool to create clippings of any shapes you like and use it in your CSS code for desired results. Also, check the demos below where I created some clippings using this tool. Bookmark/save...