Is there another way to achieve BLUR EFFECT on letters?

Custom code
1

Hi guys! I am using CSS code to achieve Blur Effect on letters

[data-id="WIDGET ID"] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

It works fine, but every time I preview the website in a different screen size, the widget (which is a transparent rectangle) moves a bit and causes an undesirable effect on the letters

screenshot
screenshot720×213 35.4 KB

Do you know if there is another way to make the text blurred with CSS? Or how to make the widgets stay still and stable in one position to be sure they don’t move?

Any help will be appreciated :pray:

2

Hi @2041 I imagine this because the blur effect adds extra pixels to the line-height. This could be resolved by setting a fixed line-height inside the CSS for those lines of text that prevents it from moving on hover.

3

@HEADLESS.HORSE thank you for your help. I realised that blur effect applied to widgets will not help me in this case, because I have troubles with text on mobile layout too. The best would be to blur directly text. Do you know if it is possible to use CSS code in RM just for text?

4

Yes there is a blur effect. I’ve shared this solution from CSS tricks. Would be a case of selecting the ID for the text widget and using the following.

1 Like
5

Thank you! It works :+1: For anyone who is interested here is a code:

[data-id="WIDGET-ID"] {
  text-shadow: 0 0 5px;
  }

in addition, the transparency of a colour must be changed in the properties of the font settings.

1 Like