Fade-out Blur Effect for Floating Div

Question

I'm rendering an array of messages, I want to make a blur effect at the bottom of the component for the remaining part of a message. So far, I've found the blur effect is applied to the children of the div. In this case I need to apply the blur effect to anything that is behind the div.

In other words, I have a floating div and I want everything that passes through behind it to be blurred.

Below is the code snippet

<>
      <div
        ref={messagesContainerRef}
        className="w-full h-full flex flex-col rounded-xl overflow-auto relative"
      >
        {messages.map((message, index) => (
          <div
            key={message.id}
            className="w-full flex flex-col border-[1px] border-white/30 rounded-xl p-2 my-1"
          >
            <div className="w-full rounded-lg text-sm">{message.question}</div>
            <div className="w-full py-2 rounded-lg text-sm">{message.answer}</div>
          </div>
        ))}
      </div>
      <div
        className="absolute bottom-0 w-full h-16 blur-sm ">
      </div>
    </>
    ```

Answer 1

Blur a section of text using backdrop-filter

Tailwind backdrop-blur may be used to blur content behind an element. This can also be done using plain css with backdrop-filter.

This did not work for OP because the backdrop was incorrectly placed and the wrong class was applied. These problems were fixed by adding a wrapper around the messages container, making the backdrop the last child, and applying the correct classes. It's also possible to do this using an ::after pseudo element, which would simplify the html (not shown).

Run the snippet to see the text in the lower part of the messages container blurred.

Code Snippet

html,
body {
  height: 100%;
}

/* css without Tailwind */

.messages-blur {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(2px);
}

<!-- wrapper -->
<div class="relative">

<!-- messages container -->
<div class="w-full h-full flex flex-col rounded-xl overflow-auto">

<!-- message -->
  <div class="w-full flex flex-col border-1 border-white/30 rounded-xl p-2 my-1">
    <div class="w-full rounded-lg text-sm">
      Message Question 1
    </div>
    <div class="w-full py-2 rounded-lg text-sm">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
    </div>

    <div class="w-full flex flex-col border-[1px] border-white/30 rounded-xl p-2 my-1">
      <div class="w-full rounded-lg text-sm">
        Message Question 2
      </div>
      <div class="w-full py-2 rounded-lg text-sm">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
      </div>
    </div>
  </div>
</div>

  <!-- backdrop -->
  <div class="absolute top-1/2 left-0 bottom-0 w-full backdrop-blur-sm"></div>

</div>

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>