Free CSS Animation Tool
Create smooth CSS hover effects for backgrounds, transforms, opacity, shadows, colors, dimensions and filters. Customize the transition duration, timing function and delay, preview the result and copy the generated CSS.
Move the pointer over the preview element to see the generated transition. The effect is created from the selected CSS property, starting value, hover value, duration, timing function and delay.
Enter valid CSS values that are compatible with the selected property.
For example, use scale(1) and scale(1.08)
for a transform transition, or brightness(1) and
brightness(1.2) for a filter transition.
The CSS Hover Transition Generator is a visual development tool for
creating animated changes between an element’s normal state and its
:hover state.
It generates the normal property value, the hover property value and
the complete transition declaration. You can use the
resulting CSS for buttons, links, cards, images, navigation elements,
form controls and other interactive components.
A CSS transition creates a gradual change between two values of an animatable CSS property. Without a transition, the new value appears immediately. With a transition, the browser interpolates between the initial and final values over a specified period.
.button {
background: #3498db;
transition: background 0.3s ease;
}
.button:hover {
background: #e74c3c;
}
The transition should normally be declared on the element’s default selector. This allows the effect to animate both when the pointer enters the element and when it leaves.
The shorthand transition property combines the property
name, duration, timing function and optional delay.
transition: property duration timing-function delay;
.element {
transition: transform 0.3s ease-out 0s;
}
Animate between compatible background values. Color-to-color transitions generally produce the most predictable results.
.button {
background: #2563eb;
transition: background 0.3s ease;
}
.button:hover {
background: #7c3aed;
}
Use transform to scale, rotate, translate or skew an
element without changing the layout of surrounding content.
.card {
transform: translateY(0) scale(1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-6px) scale(1.02);
} Opacity transitions are useful for fading overlays, captions, tooltips, menus and decorative content.
.overlay {
opacity: 0;
transition: opacity 0.25s ease;
}
.card:hover .overlay {
opacity: 1;
} Animate a shadow to make a button, card or panel appear to rise from the page.
.card {
box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 16px 32px rgba(15, 23, 42, .2);
} Change an element gradually between rectangular, rounded and circular shapes.
.shape {
border-radius: 8px;
transition: border-radius 0.4s ease;
}
.shape:hover {
border-radius: 50%;
} Animate text or icon colors to provide visual feedback for links, buttons and navigation elements.
.nav-link {
color: #334155;
transition: color 0.2s ease;
}
.nav-link:hover {
color: #2563eb;
} Width and height can be animated when both states use explicit, compatible values. These properties can affect page layout and may be less efficient than transforms.
.bar {
width: 120px;
transition: width 0.4s ease;
}
.bar:hover {
width: 220px;
}
Traditional transitions between numeric values and
auto may not behave consistently. Consider using
scaleX() or scaleY() when the size change
should not move surrounding content.
Animate brightness, contrast, saturation, grayscale, blur and other CSS filter functions.
.image {
filter: brightness(1) saturate(1);
transition: filter 0.3s ease;
}
.image:hover {
filter: brightness(1.1) saturate(1.25);
} A transition timing function determines how quickly the animated value changes at different points during the transition.
The default timing function. It starts slowly, accelerates and then slows near the end.
The transition moves at a constant speed from beginning to end.
The effect begins slowly and accelerates toward the end.
The effect starts quickly and slows as it approaches the final value.
The effect begins and ends slowly, with faster movement in the middle.
The cubic-bezier() function lets you create a custom
acceleration curve.
.element {
transition: transform 0.45s cubic-bezier(.25, .46, .45, .94);
} Multiple properties can be animated by separating individual transition definitions with commas.
.card {
background: #ffffff;
color: #1e293b;
transform: translateY(0);
box-shadow: 0 2px 10px rgba(15, 23, 42, .1);
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.card:hover {
background: #2563eb;
color: #ffffff;
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(15, 23, 42, .2);
}
Listing each property explicitly is usually preferable to
transition: all. Explicit declarations prevent unrelated
property changes from being animated unexpectedly.
Appropriate duration depends on the size and purpose of the visual change. Small interface effects should usually feel immediate.
| Effect type | Suggested duration |
|---|---|
| Text colors, icons and subtle button feedback | 0.15s–0.25s |
| Cards, shadows, filters and small transforms | 0.25s–0.4s |
| Large decorative transformations | 0.4s–0.6s |
Avoid unnecessary transition delays on buttons, links and other functional controls because delayed feedback can make an interface feel unresponsive.
Transitions using transform and opacity
generally perform well because browsers can often render them without
recalculating document layout.
Animating width, height, margins and
positional layout properties can trigger layout recalculation and
repainting. This can become noticeable when many elements animate at
the same time.
Large shadows, blur filters and effects covering large areas may also require additional rendering work. Test complex transitions on mobile and lower-powered devices.
Important information and controls must remain usable without hover. Keyboard users and touchscreen users may not trigger the same hover interaction as users with a mouse or trackpad.
Add equivalent focus styles to interactive controls where appropriate.
.button:hover,
.button:focus-visible {
background: #1d4ed8;
transform: translateY(-2px);
}
.button:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
Users can request reduced motion through the
prefers-reduced-motion media feature.
@media (prefers-reduced-motion: reduce) {
.button,
.card,
.image {
transition-duration: 0.01ms;
}
} .button {
background: #2563eb;
color: #ffffff;
transform: translateY(0);
box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.button:hover {
background: #1d4ed8;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(37, 99, 235, .3);
} .card {
transform: translateY(0);
box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
transition:
transform 0.3s ease-out,
box-shadow 0.3s ease-out;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
} .image-wrapper {
overflow: hidden;
}
.image-wrapper img {
transform: scale(1);
filter: brightness(1);
transition:
transform 0.5s ease,
filter 0.5s ease;
}
.image-wrapper:hover img {
transform: scale(1.08);
filter: brightness(.85);
} .nav-link {
color: #475569;
transition: color 0.2s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
color: #2563eb;
}
A transition placed only inside :hover may animate when
the pointer enters but return abruptly when the pointer leaves.
Declare it on the normal selector.
Using transition: all can animate unrelated property
changes. Specify only the properties that are intended to animate.
The browser must be able to interpolate between the starting and
ending values. A change such as width: auto to
width: 300px may not transition as expected.
Long transitions can make buttons and navigation feel delayed. Functional interface feedback should generally remain short.
Animating dimensions and margins can move surrounding content. Use transforms when the visual movement should not affect layout.
Touchscreens, keyboard navigation and assistive technologies may not activate hover. Ensure the interface remains understandable and usable without the effect.
A transition animates a change between two states. A CSS animation uses keyframes and can contain multiple stages, repeat automatically or run independently of a hover state.
Confirm that the property is animatable, the starting and ending values are compatible, the duration is greater than zero and the transition is declared on the correct element.
It is generally better to name the individual properties that should animate. This produces more predictable behavior and makes the CSS easier to maintain.
Transform and opacity are generally efficient because they can often animate without triggering layout recalculation.
Yes. Standard hover and focus transitions can be created entirely with CSS. JavaScript is only required when application logic must add or remove the relevant state.
Touchscreens do not provide the same persistent hover behavior as pointer devices. The component must remain usable without depending on hover.
Direct transitions between complex gradient values are not always interpolated predictably. A common alternative is to place the second gradient on a pseudo-element and animate its opacity.
Many interface hover effects work well between approximately
0.2s and 0.4s. Larger decorative changes
may require slightly more time.
Declare the transition on the element’s normal selector so the effect runs both when entering and leaving the hover state.