0

My Problem

Basically I was making this website to provide people with an easier way to look-up Hypixel's API. The API look-up part is in Javascript and is minimal (and has my api key) so I haven't sent it here. Basically I added a blur to the background (I have the CSS file down below) but it also blurred out the text. Can someone tell me how to fix that.

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible"  content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Prime's Hypixel API Look-Up</title>
    </head>
    <body>
        <div id="divOne">
            <h1 id="headerOne">Prime's Hypixel API</h1>
            <h1 id="headerOne">Look-Up</h1>
            <hr id="lineOne">
        </div>
    </body>
</html>

CSS Code

#divOne {
    color: rgb(0, 30, 255);
    text-align: center;
    font-style: italic;
}
  
body {
    background-color: aqua;
    background-image: linear-gradient(to right, aqua , blue );
    filter: blur(8px);
    -webkit-filter: blur(8px);
}
  
#lineOne {
    background-image: linear-gradient(to right, aqua , blue );
    width: auto;
}

If someone can make it so that it dosen't blur out the text just the background then please help

I know this is basically me asking you to make my site for me but yeah hehe

Professor Abronsius
  • 33,063
  • 5
  • 32
  • 46
prime
  • 1
  • 1
    The problem is you're blurring everything from the `` tag, including everything inside it. Another way to achieve what you want is setting the image in an `` element inside the `` and blurring that. – Martijn Vissers Nov 30 '22 at 12:54

0 Answers0