Hover Effects Generator

Create stunning hover effects for buttons, cards, and images.

Hover Effect

Settings

Duration300ms

Intensity1

Preview (Hover the button)

Generated CSS

.element {
  transition: all 300ms ease;
}

.element:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Hover Effects Generator?

Generate CSS hover effect code for buttons, cards, and links. Choose from lift, glow, underline, colour shift, and more - with live preview.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Hover Effects Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Select an effect type

Choose lift, glow, underline draw, colour fill, scale, or border reveal. The preview shows the effect on a sample element.

Adjust intensity and timing

Set the translation distance, shadow spread, or colour opacity. Adjust the transition duration and easing.

Copy the CSS

Click Copy to get both the base state and the :hover state rules together.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Lift and shadow effect */
.card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Colour fill on link */
.nav-link {
  position: relative;
  color: #6C2EF5;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: currentColor;
  transition: width 250ms ease;
}
.nav-link:hover::after { width: 100%; }

Use :focus-visible alongside :hover for keyboard accessibility. Hover effects should also apply on focus for users who navigate with keyboards.

Pro tips

Pro tips for better results

★

Add :focus-visible for every hover effect

Keyboard users navigate with Tab and need focus styles as strong as hover styles. Apply the same visual treatment to :focus-visible that you apply to :hover.

★

translateY(-4px) is the standard card lift

A 2-4px upward movement on hover combined with a slightly larger box-shadow creates a convincing lift effect. More than 6px looks exaggerated.

★

Use currentColor for hover effects tied to the text colour

currentColor inherits from the element colour property. Using it in pseudo-element backgrounds or borders means the effect automatically adapts to different link colours.

FAQ

Frequently asked questions

On touch devices, :hover is triggered on tap rather than pointer hover. This can cause effects to appear stuck in the hovered state after tapping. Use @media (hover: hover) to limit hover effects to devices with true pointer hover support.

No. Everything runs in your browser. Nothing is sent to a server.