Animation & Motion · Free generator

CSS Hover Effects Generator

Free · no sign-up Live preview · copy or download the CSS

Interactivity you can feel before the click. Choose lift, grow, tilt, glow or press; tune intensity and speed; hover the preview to test; copy both states, transition included.

Settings

hover me
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 15 minCSS Links & ListsWhere :hover and friends come from.STEP 2 · 25 minCSS TransformsThe lift/grow/tilt verbs.STEP 3 · 20 minCSS TransitionsWiring both states together.


  1. CSS Cubic Bezier EditorAnimation & Motion
  2. CSS Button GeneratorTypography & Buttons
  3. CSS Box Shadow GeneratorShadows & Effects
  4. CSS Keyframes GeneratorAnimation & Motion
  5. CSS Border Radius GeneratorShape & Layout
  6. CSS Layer Styles GeneratorShadows & Effects


How it works


Every effect here is the same two-part pattern: a transition on the base state (so motion runs both directions) and transform/shadow changes under :hover. All five stay on the compositor-cheap properties, so they're 60fps even on weak devices.


Matching matters more than intensity: lift for cards, grow for thumbnails, tilt for playful badges, glow for dark UIs, press for the click itself (put it on :active). One effect family per page — hover language is vocabulary, and mixed vocabularies read as noise. Remember hover doesn't exist on touch screens: it must enhance, never gate, functionality.


Run the code — try it yourself
Give all three gallery thumbs the grow effect (scale 1.05, .25s) — and add a :focus-visible outline so keyboards get feedback too.


exercise.html — editable


Frequently asked questions
Why declare the transition on the base state, not on :hover?
On :hover it only animates in — leaving snaps. The base declaration animates both directions.
The grow effect blurs my text slightly.
Scaling rasterized layers can soften pixels; keep scale ≤1.05 on text-bearing elements, or lift instead.
What about keyboard users?
Mirror important hover feedback on :focus-visible so keyboard navigation gets the same signal.
Press on hover or on active?
:active — the press should answer the actual click, as the fourth example shows.


Keep going
Hover states are the handshake between interface and hand — subtle, fast, consistent. The state system behind them lives in the Links lesson and Pseudo-classes; when a hover deserves a full performance, graduate to the Keyframe Builder.
CSSmatic is a non-profit project, made by developers for developers.