Hero Blur Generator

Name: Hero Blur Generator
Author: Webrenew

Create stunning hero backgrounds with colorful blur effects and export CSS.

Blur Orbs (3)

Orb 1

Orb 2

Orb 3

Edit Orb 1

Color

Horizontal Position15%

Vertical Position20%

Size600px

Larger orbs create more dramatic Vercel-style effects

Opacity40%

Global Settings

Background Color

Blur Amount120px

Larger values create softer, more diffused blur

Preview

Your Hero Title

Beautiful blurred background effects for modern hero sections

CSS Code

.hero-blur-container {
  position: relative;
  min-height: 600px;
  background: #000000;
  overflow: hidden;
}

.blur-orb-1 {
  position: absolute;
  width: 600px;
  height: 600px;
  left: 15%;
  top: 20%;
  transform: translate(-50%, -50%);
  background: #3b82f6;
  opacity: 0.4;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blur-orb-2 {
  position: absolute;
  width: 700px;
  height: 700px;
  left: 85%;
  top: 70%;
  transform: translate(-50%, -50%);
  background: #8b5cf6;
  opacity: 0.35;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.blur-orb-3 {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ec4899;
  opacity: 0.3;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}