I'm creating a homepage using HTML/CSS/JavaScript, on this page I have text floating on the top left portion of the screen. I have a number of backgrounds saved from Reddit and a script which randomly selects one upon start, my problem is that because this background can be any colour it is difficult for the text to be readable, so my idea was to blur the background around just the text in order to make it readable. Ideally, it would follow just the text and blur the outline of it but I tried placing it in a box, however, because it uses relative layout it was difficult to have the box fill and blur the minimum space possible.

How can I improve the readability of text by blurring the background just around the text? I'm also open to other suggestions to improve readability (remembering the background changes).