How to copy a hover effect from a website

A hover effect is over in a fraction of a second and it is made of three separate things. Here is how to read all three off a live page, so your copy feels like the original and not just close.

Updated October 2026 · by the Design Toolkit team

What a hover effect is made of

• The end state — the :hover rule: what changes. Usually a transform, a color, a shadow or an opacity.
• The transition — which properties animate, for how long, and after what delay.
• The curve — how the change moves through that time. It is what makes an effect feel snappy, soft or springy.

Most copied hover effects feel wrong because only the first of the three was copied.

The trap: the transition belongs on the normal state

Here is a card that lifts on hover:

.card {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}

Put the transition only on :hover and the card eases up and then snaps back, because leaving the state has no transition of its own. Copy the transition from the normal rule, not from the hover rule.

1. Force the state in DevTools

Select the element in the Elements panel. In the Styles panel click :hov and tick :hover, or right-click the node and choose Force state → :hover. The page now shows the hover state without your mouse, and the Styles panel lists the :hover rules that apply.

2. Read what changes

Look at the values that differ from the resting state: transform, opacity, color, background-color, box-shadow, border-color. Those are the properties that move. A change you cannot find on the element itself usually lives on a child or a pseudo-element, which is step 4.

3. Read the transition on the normal rule

Untick the state and read the element's ordinary rule. The transition shorthand carries the property list, the duration, the curve and the delay:

transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1) 0s;

Watch for transition: all. It animates every property, including ones that never change, and it hides which ones matter. List only the properties that really move. The delay is part of the feel too, so keep it.

4. Check children and pseudo-elements

Many effects are not on the element you hovered. Look for selectors such as .card:hover .arrow or .link:hover::after: the arrow slides, the underline grows. Search the stylesheet for the element's class followed by :hover to find every rule the hover triggers.

Make it behave on touch and with reduced motion

There is no pointer on a touch screen, so a tapped element keeps its hover state until something else is tapped. Wrap the effect so it only applies where hover exists, and switch it off for people who ask for less motion:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

The same effect in Tailwind

<div class="transition duration-200 ease-out
            hover:-translate-y-1 hover:shadow-lg">

transition sets the property list, duration-200 is 200ms, ease-out is the curve, and the hover: prefix carries the end state. For a custom curve use an arbitrary value, such as ease-[cubic-bezier(0.16,1,0.3,1)].

The shortcut

That is the Styles panel, a forced state and a stylesheet search. Design Toolkit reads the same things on the element you select: its transitions with their durations and curves, drawn so you can see the shape, and the :hover, :focus and :active rules that apply to it, usually the values the transitions animate to. Copy for AI writes the lot out as a brief with the timing, easing, keyframes, hover values and the full CSS, ready to paste into ChatGPT, Claude or Gemini.

The same panel reads any animation on a page, including ones built in JavaScript, and the easing curve behind them.

Common questions

Read next