Tidadigi Logo

Tailwind CSS Blur

Lớp blur được dùng để áp dụng hiệu ứng làm mờ lên ảnh. Trong CSS, chúng ta dùng CSS blur() Function để làm điều đó. Tailwind CSS đã thêm tính năng blur mới trong phiên bản 2.1.

Blur:

  • blur-0: Lớp này tương đương với việc không có hiệu ứng mờ, như blur(0) trong CSS.
  • blur-sm: Lớp này tương đương với hiệu ứng mờ nhẹ, như blur(4px) trong CSS.
  • blur: Lớp này tương đương với hiệu ứng mờ thông thường, như blur(8px) trong CSS.
  • blur-md: Lớp này tương đương với hiệu ứng mờ vừa, như blur(12px) trong CSS.
  • blur-lg: Lớp này tương đương với hiệu ứng mờ lớn, như blur(16px) trong CSS.
  • blur-xl: Lớp này tương đương với hiệu ứng mờ rất lớn, như blur(24px) trong CSS.
  • blur-2xl: Lớp này tương đương với hiệu ứng mờ cực lớn, như blur(40px) trong CSS.
  • blur-3xl: Lớp này tương đương với hiệu ứng mờ siêu lớn, như blur(64px) trong CSS.

Cú pháp:

<element class="filter 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 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Blur Class</b>
    <div class="grid grid-flow-col text-center p-4">
        <img class="rounded-lg filter blur-0" 
          src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-sm" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-md" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-lg" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter blur-xl" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        
    </div>
</body>

</html>

Kết quả:

tailwind-css-blur
Last Updated : 20/07/2025