CSS Easing Code Generator - Ceaser

CSS easing preview

What it does

Using this free tool you can quickly generate the CSS code you need for some liquid smooth CSS easing effects. It can act as not only a really good time saver but also help you expand your understanding (if you're new to CSS) of what can be achieved with the easing function. It's often used with buttons to create a nice effect when users hover or click on buttons in your web design.

How to use it

  1. First visit the CSS tool here.
  2. Pick the easing type you want.
  3. Set the duration in milliseconds.
  4. Alter the nodes in the easing curve box to fine tune it.
  5. Click on one of the effects to see the CSS easing in action.
  6. Keep changing the parameters until you're satisfied with the result.
  7. Below the effect demonstration you'll see your CSS code. Copy and paste it into your project where it's required.


If you need to create easing effects regularly this can be a nice time saver. It's so easy to use that potentially the end result of what you create maybe much nicer than it would have been without the tool.


You'll already need to have a reasonable understanding of the CSS language and how to implement the snippet of code you generate. A frustrating aspect is that you can't change the basic dark green graphic that is used to demonstrate your chosen parameters.

Other notes

If you need to use the tool regularly remember to bookmark it.

Related or alternative tools


Tool location: External
Cost to use: Free
Category: Web design tools