ES
Home › Developer Tools › CSS Hover Effects Generator

CSS Hover Effects Generator

Browse a live gallery of hover effects for buttons, text links and images. Hover a card to try it, customize the colors, timing and easing, and copy lightweight HTML and CSS with keyboard focus and reduced-motion support built in.

Last updated:

Hover over (or tab to) any card to try the effect, then click Customize.

Effect


    

      
      
      
    

  

  

  Advertisement
  



  










  Advertisement
  





How to use the CSS Hover Effects Generator


  1. Choose Buttons, Links or Images at the top.
  2. Hover the cards in the gallery and click Customize on the one you like.
  3. Adjust colors, duration, easing and corner radius; change the button, link or caption text.
  4. Tick Show hover state to freeze the effect in its hovered look while you fine-tune it.
  5. Copy the CSS and HTML, or download a demo page to test it on its own.


How CSS hover effects work


A hover effect is a pair of states plus a transition between them:


.hover-lift {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.hover-lift:hover,
.hover-lift:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px rgba(47, 107, 79, 0.7);
}


The transition lists which properties animate, how long they take and with which easing curve. Effects that reveal a fill or a streak use a pseudo-element (::before or ::after) that is moved or scaled with transform, while the button keeps overflow: hidden so the extra layer stays inside its corners.



Easing curves at a glance




EasingMotionUse it for



easeQuick start, gentle end (the browser default)Almost anything


ease-outFast start, slows down at the endElements responding to the pointer, fills, underlines


ease-in-outSlow start and endLonger movements such as image zooms


linearConstant speedColor changes, shine sweeps


cubic-bezier(.34,1.56,.64,1)Overshoots slightly, then settlesPlayful grow and arrow effects


cubic-bezier(.22,1,.36,1)Very smooth decelerationPremium-feeling lifts and slides






Tips for good hover effects


    

  • Use one clear effect per element. Combining a lift, a color change and a shine on the same button usually feels busy.
    • 

  • Keep the same effect for the same kind of element across your site so visitors learn what is clickable.
    • 

  • Check the contrast of both states: a fill effect changes the text color, so test the hovered colors as well.
    • 

  • Do not hide important information behind hover only; touch devices cannot hover.
    • 

  • Add will-change: transform only if an effect stutters, not to every element.
    • 




Frequently asked questions


How do I add a hover effect in CSS?
Write the normal style of the element, add a transition for the properties that change (for example transition: transform 300ms ease), then write a :hover rule with the new values. The browser animates between the two states. The generator outputs exactly this structure.


Which CSS properties are best to animate on hover?
transform and opacity are the smoothest because browsers can animate them on the GPU without recalculating layout. Colors, box-shadow and background-position are fine for small elements. Avoid animating width, height, margin or top, which force layout work on every frame.


What is a good hover transition duration?
Most interface hover effects feel right between 150 and 400 milliseconds. Shorter feels instant and snappy, longer feels smooth but can seem sluggish on buttons. Larger movements, such as an image zoom, can take 400 to 700 milliseconds.


Why does the code include :focus-visible?
People who navigate with a keyboard never hover. Applying the same style on :focus-visible shows them the effect when they tab to the button or link, which is also an accessibility requirement for visible focus.


Do hover effects work on phones?
Touch screens have no real hover. Mobile browsers usually apply :hover briefly on tap, so the effect should be a bonus, never the only way to reveal content. For caption overlays, consider showing the caption by default on small screens.


What does the reduced motion option do?
It adds a @media (prefers-reduced-motion: reduce) block that turns transitions off for visitors who asked their operating system to minimize animation. The hover style still changes, just without the movement.


Can I combine two hover effects?
Yes, as long as they change different properties. For example, the lift effect (transform, box-shadow) works with outline to solid (background, color). Merge the transition lists into one transition declaration, because a second transition line replaces the first.


Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.



Related tools



CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.



See all 52 Web, HTML & CSS Tools →