Các class backdrop blur được dùng để áp dụng hiệu ứng làm mờ cho một phần tử. Tailwind CSS đã thêm tính năng blur mới này trong phiên bản 2.1.
Các Class Backdrop Blur:
- backdrop-blur-0: Class này tương đương với việc không làm mờ phần tử blur(0) trong CSS.
- backdrop-blur-sm: Class này tương đương với hiệu ứng làm mờ nhẹ trên phần tử blur(4px) trong CSS.
- backdrop-blur: Class này tương đương với hiệu ứng làm mờ bình thường trên phần tử blur(8px) trong CSS.
- backdrop-blur-md: Class này tương đương với hiệu ứng làm mờ trung bình trên phần tử blur(12px) trong CSS.
- backdrop-blur-lg: Class này tương đương với hiệu ứng làm mờ lớn trên phần tử blur(16px) trong CSS.
- backdrop-blur-xl: Class này tương đương với hiệu ứng làm mờ rất lớn trên phần tử blur(24px) trong CSS.
- backdrop-blur-2xl: Class này tương đương với hiệu ứng làm mờ cực lớn trên phần tử blur(40px) trong CSS.
- backdrop-blur-3xl: Class này tương đương với hiệu ứng làm mờ siêu lớn trên phần tử blur(64px) trong CSS.
Cú pháp:
<element class="filter backdrop-blur-{amount}">..</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 ">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Backdrop Blur Class</b>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute w-full py-18">
<img class="rounded-lg object-cover"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210605213323/Screenshot20210605213311.png"
alt="image">
</div>
<div class="relative h-32 flex overflow-x-auto space-x-4">
<div class="flex-shrink-0 border-4 border-green-500
backdrop-filter backdrop-blur-sm w-1/3">
</div>
<div class="flex-shrink-0 border-4 border-green-500
backdrop-filter backdrop-blur-md w-1/3">
</div>
<div class="flex-shrink-0 border-4 border-green-500
backdrop-filter backdrop-blur-lg w-1/3">
</div>
</div>
</div>
</body>
</html>
Kết quả:
