能否用CSS实现模糊渐变阴影并作为按钮悬停效果？

Absolutely! You don’t need to rely on PNGs to get that elegant blurred gradient shadow effect for your button’s hover state. The issue with your original code is that applying filter: blur() directly to the button blurs the button’s content (text, borders, etc.) along with the gradient. Instead, we can use a pseudo-element to separate the blurred gradient from the button’s actual content—this keeps your button crisp while adding the shadow effect behind it.

Here’s a clean, working solution: #

We’ll use a ::before pseudo-element positioned behind the button to render the blurred gradient. By default, this pseudo-element is hidden, and we reveal it on hover with a smooth transition.

/* Base button styles */
.gradient-shadow-btn {
  position: relative;
  padding: 12px 36px;
  border: none;
  border-radius: 100px;
  background-color: #ffffff; /* Your button's base background */
  color: #2d3748;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  z-index: 1; /* Ensures button content stays above the shadow */
  transition: all 0.3s ease;
}

/* Blurred gradient shadow pseudo-element */
.gradient-shadow-btn::before {
  content: "";
  position: absolute;
  inset: -6px; /* Makes the shadow slightly larger than the button */
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
  border-radius: inherit; /* Inherits the button's rounded corners */
  filter: blur(8px); /* Adjust blur intensity as needed */
  z-index: -1; /* Places the shadow behind the button */
  opacity: 0; /* Hide shadow by default */
  transition: opacity 0.3s ease;
}

/* Show shadow on hover */
.gradient-shadow-btn:hover::before {
  opacity: 1;
}

/* Optional: Add a slight scale effect for extra polish */
.gradient-shadow-btn:hover {
  transform: scale(1.02);
}

Key tweaks to customize the effect: #

• Adjust the inset value to control how far the shadow spreads beyond the button (negative values expand it outward).
• Modify filter: blur() to make the shadow softer or sharper.
• Tweak the transition duration (e.g., 0.4s ease) to change how quickly the shadow appears/disappears.
• If you want the shadow to be more subtle, lower the opacity value in the hover state (e.g., 0.8 instead of 1).

This approach is fully responsive, easy to modify, and avoids the overhead of external image files—way more elegant than using a PNG!

内容的提问来源于stack exchange，提问作者Victor