Skip to content
Convertto

CSS Hover Effects — Underlines, Lifts and Fills

Generate a hover effect that animates cleanly, with the reduced-motion guard included.

Every effect here animates only transform and opacity, which the browser composites without laying out or repainting — the difference between a smooth hover and a janky one is almost always which property you animated. Each recipe also fires on :focus-visible as well as :hover, because a hover-only affordance does not exist for keyboard users and does not exist on touch at all. The sliding underline uses scaleX with a shifting transform-origin so it enters from one side and leaves from the other.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why animate transform instead of width or top?

Width and top change the layout, so the browser recalculates geometry and repaints every frame. Transform and opacity are handled by the compositor and skip both steps. The same-looking effect can be an order of magnitude cheaper.

What happens to hover effects on a phone?

There is no hover, so a touch either triggers it on tap and leaves it stuck, or skips it. Never put information behind hover alone. Including :focus-visible at least makes the effect reachable by keyboard.

Why does the underline slide in from one side and out the other?

The transform-origin switches between the resting and hovered states. Scaling from right at rest and from left on hover means the growth and the retreat run in the same direction, which reads as a single sweep rather than a bounce.

How to use the css hover effect generator

  1. 1Choose the effect.
  2. 2Pick the accent.
  3. 3Set the duration.
  4. 4Set the distance.
  5. 5The result appears immediately — copy or download it.

Embed this tool

Put the working css hover effect generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Loader GeneratorBuild a spinner, dots, bars or a pulse from pure CSS and copy the keyframes.CSS Scrollbar StylerStyle a scrollbar with both the standard properties and the WebKit pseudo-elements.CSS Tooltip GeneratorGenerate a tooltip from a data attribute — no JavaScript, no extra markup.CSS Animation GeneratorGenerate keyframe animations — fade, slide, bounce, pulse, spin and shake.Cubic Bezier Easing GeneratorBuild custom CSS easing curves and see the motion they produce.

Last updated

More css generators