Modern web applications heavily rely on images, and adding the blur effect will enhance the user experience (UX) and user interface (UI) of your image elements when creating an eCommerce store, portfolio, blog, or admin panel using Laravel 12. Using a blurred image is an excellent choice for placeholders, overlay backgrounds, preview states, or restricted content.
In this tutorial, I will demonstrate how to add the blur effect to an image using the Spatie/Image package within your Laravel 12 project.
In this tutorial, we will be installing the Spatie/Image Composer package. Upon successful installation, you will be able to apply the blur effect to images using the `load()` and `blur()` functions from the Spatie package. The package itself is a simple form with a file input where you will select an image, and then display a preview of the original image.
Steps for Laravel 12 Blur Effect to Image Example:
Follow the steps provided below to create a thumbnail image in Laravel 12.
Step 1: Install Laravel 12
This step may be skipped; however, if you have not created the Laravel application, please execute the command provided below:
composer create-project laravel/laravel example-appStep 2: Install spatie/image Image Package
To add the blur effect for an image, installing the spatie/image Composer package is required. To install the Composer package, execute the command shown below in your command prompt or to terminal:
composer require spatie/imageStep 3: Create Routes
In this step, we will add routes and a controller file. So first, add the below route in your routes.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');Step 4: Create Controller File
Now, it is required to create a new ImageController for image upload and add a blur effect to the image. So, first, run the command below:
php artisan make:controller ImageControllerAfter this command, you can find the ImageController.php file in your app/Http/Controllers directory. Open the ImageController.php file and put the code below in that file.
Make sure you have created the “images” folder in the public folder.
app/Http/Controllers/ImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Spatie\Image\Image;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('imageUpload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): RedirectResponse
{
$this->validate($request, [
'image' => ['required'],
]);
$imageName = time().'.'.$request->image->extension();
Image::load($request->image->path())
->blur(40)
->save(public_path('images/'). $imageName);
return back()->with('success', 'You have successfully upload image.')
->with('image', $imageName);
}
}Step 5: View File and Create Upload directory
Okay, in this last step, we will create the imageUpload.blade.php file for the photo upload form, manage error messages, and also success messages. So first, create the imageUpload.blade.php file and put the code below:
resources/views/imageUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Add Blur Effect to Image in Laravel? -Your Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3"><i class="fa fa-star"></i> How to Add Blur Effect to Image in Laravel? - Your Title</h3>
<div class="card-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
<img src="images/{{ Session::get('image') }}">
@endif
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label" for="inputImage">Image:</label>
<input
type="file"
name="image"
id="inputImage"
class="form-control @error('image') is-invalid @enderror">
@error('image')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Run Laravel App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serveNow, go to your web browser, type the given URL, and view the app output:
http://localhost:8000/image-upload
Conclusion:
Adding a blur effect to images in Laravel 12 is both simple and highly flexible, depending on your project requirements. Whether you’re building an admin panel, eCommerce store, SaaS dashboard, or a content-driven website, blur effects can help you create modern, polished interfaces.
With proper implementation, blur effects can enhance aesthetics, improve UX, and add a professional touch to your Laravel 12 application.
Keep building, keep optimizing, and make your Laravel apps visually outstanding.
Happy Coding!
FAQ
1. What is the purpose of adding a blur effect to images?
A blur effect is commonly used to enhance UI design, create background overlays, protect sensitive information, highlight focused content, or improve loading experiences with placeholder effects.
2. Do images that are blurred consume a lot of performance?
Yes, they do; particularly large images. It is best to do the following:
- Resize images before you blur them
- Create queues
- Optimize image sizes
3. Does blur affect SEO?
Blur itself does not directly affect SEO. However, large unoptimized images can slow down page speed, which may impact search rankings. Always optimize and compress images properly.
