Hover Effect Generator
Build hover states with your own values for movement, scale, rotation, glow, ring and brightness. Works on cards, links, images and buttons.
Same hover state works on cards, images, links, buttons - anything.
Transform on hover
Appearance on hover
Timing
.el {
transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
}
.el:hover {
transform: translate(0px, -8px);
box-shadow: 0 0 30px rgba(109, 94, 252, 0.75);
}About the hover effect generator
A hover effect is nothing more than a second set of property values plus a transition to move between them. What separates a good one from a cheap one is restraint and timing: a small movement over roughly 200 milliseconds reads as responsive, while a large movement over 600 feels sluggish.
Nothing here is preset to a fixed amount. You decide how far the element moves, how much it scales, how strong the glow is, and which easing carries it. The preview applies the same CSS to a card and a plain link so you can see the effect on more than one kind of element.
How to use it
- 1Pick a preset as a starting point, then change every value to taste.
- 2Set the movement and scale. Six to eight pixels of lift, or four to eight percent of scale, is usually enough.
- 3Add a glow or ring if the element needs to feel clickable.
- 4Tune the duration. Between 150 and 250 milliseconds suits most interfaces.
- 5Choose an easing. The spring curve overshoots slightly, which feels lively on buttons.
- 6Copy the CSS and apply the class to any element.
Worth knowing
- Hover does not exist on touch devices. Never hide information behind a hover state.
- Transitioning transform and opacity is cheap. Transitioning width, height or margin forces layout and will stutter.
- Respect prefers-reduced-motion for users who have asked for less movement.
Questions
Why does my hover effect flicker?
Usually the element moves out from under the cursor, which ends the hover, which moves it back. Apply the transform to the element itself rather than to a wrapper, and avoid moving it far enough to escape the pointer.
How do I make hover effects work on mobile?
You do not. Touch devices have no hover. Use :active for press feedback, and make sure everything reachable by hover is also reachable another way.
Which properties are safe to animate?
transform, opacity and filter are handled by the compositor and stay smooth. Anything that changes layout, such as width, height, top or margin, is far more expensive.