Fade-out Blur Effect for Floating Div

ghz 8months ago ⋅ 85 views

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>
    </>
    ```

Answers

To achieve the desired blur effect at the bottom of your component, you can use a combination of CSS and HTML elements. One approach is to create a pseudo-element for the bottom part of your messages container and apply a blur filter to it.

Here's how you can modify your code:

<>
  <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>
    ))}
    {/* Add a pseudo-element for the bottom blur effect */}
    <div className="bottom-blur"></div>
  </div>
</>

And in your CSS, you can style the bottom-blur class to achieve the desired blur effect:

.bottom-blur {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px; /* Adjust the height as needed */
  background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Apply a gradient to create a fading effect */
  filter: blur(10px); /* Adjust the blur intensity */
  z-index: 1; /* Ensure the blur is behind other content */
}

This CSS will create a pseudo-element with a gradient background that fades from transparent to opaque white at the bottom of the messages container. The filter: blur(10px); property applies a blur effect to the pseudo-element. Adjust the blur intensity and other styles as needed to achieve the desired appearance.

#css