Hover Effect Generator
Design CSS hover effects with a live button you can actually hover. Pick from 18 effects - lift, grow, glow, sweep, underline, outline, pulse and more - then tune duration, easing, amount, and colors. Copy the generated CSS or a Tailwind utility string, and share the exact configuration via URL.
About this ToolHow it works, benefits & use casesTap to collapse
Hover micro-interactions add polish, but hand-tuning transforms, shadows, and pseudo-element transitions is fiddly. This generator gives you a button you can actually hover - the generated CSS is injected live, so the effect plays exactly as it will ship. Pick from eighteen effects spanning transforms (grow, shrink, lift, sink, rotate, skew, bounce, pulse), box-shadow (glow, shadow grow, outline expand), background and color changes (background sweep, background fill, color shift), filters (blur, brightness), and animated lines (underline slide, border draw). Then tune the transition duration, an easing function, a generic amount that scales the movement, and an accent and background color via picker or hex input, and set the label text. Output the complete CSS - a .element base rule plus its :hover state with the correct transition - or a ready-to-paste Tailwind utility string that uses transition, duration-*, ease-*, and hover:* classes, with arbitrary values where a utility does not exist. Eight presets load a polished combination in one click, and the full configuration is encoded in the page URL for sharing.
How to Use
- 1Pick a hover effect from the dropdown and hover the live button to see it play immediately.
- 2Choose an easing function and set the amount that scales how far the effect moves, scales, or glows.
- 3Drag the duration slider to set the transition speed.
- 4Set the accent and background colors with the swatch pickers or by typing hex values, and edit the label text.
- 5Or click a preset (Lift, Grow, Glow, Fill, Underline, Outline, Rotate, Pulse) to load a ready-made combination.
- 6Switch the output format between CSS and Tailwind, then copy, download, or share the result.
Key Benefits
- Eighteen effects spanning transforms, shadows, backgrounds, filters, and animated lines
- A genuinely hoverable live preview - the generated CSS is injected and scoped, not a static image
- Tunable duration, easing, a generic amount, accent and background colors, and label text
- CSS output with a .element base rule plus a :hover state and the correct transition
- A Tailwind equivalent using transition, duration-*, ease-*, and hover:* utilities with arbitrary values
- Eight presets that load a polished effect, color, and timing combination in one click
- Shareable URL captures the full configuration; everything runs in the browser
Common Use Cases
- Adding a subtle lift or grow effect to buttons and cards
- Creating an animated underline or border-draw for navigation links
- Building a background sweep or fill effect for call-to-action buttons
- Drawing attention with a glow, outline-expand, or pulse on hover
- Generating consistent hover transitions to drop into a component library, as CSS or Tailwind
Hover the button to play the effect.
Copy, download, or share this hover effect
.element {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font: 600 16px/1.2 system-ui, sans-serif;
color: #6366f1;
background-color: #ffffff;
border: 2px solid #6366f1;
border-radius: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
--hov-duration: 0.3s;
--hov-easing: ease-out;
transition: transform 0.3s ease-out;
}
.element:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}Effect
CSS or Tailwind, your call
Switch the output between hand-written CSS (a .element rule plus its :hover state with the right transition) and a ready Tailwind utility string that uses transition, duration-* and hover:* classes, with arbitrary values where a utility does not exist.
Really hoverable
The preview is not a static image - the generated CSS is injected live and scoped, so hovering the button plays the exact transition you will ship. Tune the amount, easing and duration and watch it update instantly.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- CSS FormatterFormat and beautify CSS code
- CSS MinifierMinify CSS code
- Transition & Easing StudioDrag a cubic-bezier curve, play it on a live demo, and export CSS, @keyframes, Tailwind, Framer, or WAAPI
- Skeleton Screen GeneratorBuild layout-matched skeleton loaders (card/list/article/table) with shimmer/pulse/wave and a live preview
- Spacing Scale CalculatorLinear, geometric, Fibonacci or modular spacing scales with a visual ruler preview and utility classes — export CSS, Tailwind v4, SCSS, JSON
- Parallax Effect CalculatorBuild multi-layer parallax with pure-CSS perspective, JS scroll, or React — scrollable live preview
Eighteen: grow, shrink, lift, sink, glow, shadow grow, border draw, underline slide, background sweep, background fill, color shift, rotate, skew, pulse, bounce, blur, brightness, and outline expand. Transform-based effects use transform, glow and outline use box-shadow, sweep and fill change background and text color, blur and brightness use CSS filters, and underline slide and border draw animate a pseudo-element.
Yes. The generated CSS is injected into the page as a scoped style block, so the button in the preview really plays the transition when you hover it - it is not a recording or a static image. What you see is exactly what the copied CSS produces.