'Blur background of text field (tailwind or plain css)

I want a text to have a blured white background. But im actually struggling with the blur effect. Everytime i try to use filter blur, the div gets blured but my text disappears.

Here is my code so far written with tailwindcss:

<div class="inline-block">
          <div class="px-1 filter blur bg-white bg-opacity-75">
            <span
              class="font-bold text-black-dark text-sm leading-17px z-1003"
            >
              {{ dynamicText }}
            </span>
          </div>
        </div>

And here is what it should look like:

enter image description here

Because the text is dynamic, i cant set a fixed width or height to my parent div element. Can anybody help me to achieve a result as desired above?

cssvue.jsvuejs2tailwind-cssblur


Solution 1:[1]

You can try backdrop-filter: blur(10px);

As explained here: https://css-tricks.com/almanac/properties/b/backdrop-filter/

Latest Tailwind (v2.1.0) does have it backed in: https://github.com/tailwindlabs/tailwindcss/releases#new-filter-and-backdrop-filter-utilities

So, a backdrop-filter backdrop-blur should be enough if you're up to date.

Solution 2:[2]

From your screenshot, it looks like you want an outer glow. Try this something like this!

text-shadow: 0 0 32px black;

The first values are the x and the y. The third value is the shadow blur value and the last is, well, the color.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu
Solution 2 Joe Rouleau

Related Questions