GradientBlur

A highly performant and customizable Flutter widget that creates a beautiful, soft gradient blur effect — perfect for headers, overlays, cards, and modern UI designs.
Built for Flutter 3.24+, optimized for performance, and easy to integrate.

---

🌟 Preview

---

✨ Features

✅ Gradient-based blur that blends naturally with your design
✅ Customizable blur intensity and direction
✅ Supports animation and layered effects
✅ GPU-accelerated for smooth performance
✅ Lightweight, easy to use, and flexible

---

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  gradient_blur: ^1.0.1

Then run:

flutter pub get

---

🧩 Usage Example

import 'package:flutter/material.dart';
import 'package:gradient_blur/gradient_blur.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Image.network(
            'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f',
            fit: BoxFit.cover,
            height: double.infinity,
            width: double.infinity,
          ),
          const GradientBlur(
            blur: 20,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.black54,
                Colors.transparent,
              ],
            ),
            child: Center(
              child: Text(
                'Gradient Blur Example',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

⚙️ Parameters

Parameter	Type	Description
blur	double	The blur intensity (default: 10.0).
gradient	Gradient	The gradient overlay applied on the blur.
child	Widget?	The child widget to display on top of the blur.
borderRadius	BorderRadius?	Optional rounded corners for the blurred area.
clipBehavior	Clip	How the content is clipped (default: Clip.hardEdge).

---

💡 Example: Header Overlay

GradientBlur(
  blur: 15,
  gradient: LinearGradient(
    colors: [
      Colors.black.withOpacity(0.6),
      Colors.transparent,
    ],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Text(
      'Beautiful Gradient Blur Header',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
);

---

🧠 How It Works

The GradientBlur widget combines BackdropFilter and ShaderMask logic under the hood.
It first applies a Gaussian blur to the background, then overlays a gradient shader to achieve a soft, aesthetic fade effect.

---

🧰 Example Project

You can explore the full working demo inside the example/ folder of this repository.

Run it with:

flutter run example/lib/main.dart

---

🧾 License

This project is licensed under the MIT License.
See the LICENSE file for details.

---

👨‍💻 Author

Mohamed Waleed Elsherif
GitHub • Pub.dev

---