To make big visual changes to elements, we use the filter property.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Filter-shop</h3>
<p>No filter added</p>
<img src="https://mimo.app/i/nacho.png">
</body>
img {
filter
}
filter can use a few different functions as it's value. Let's start with blur().
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Filter-shop</h3>
<p>Out of focus filter added</p>
<img src="https://mimo.app/i/nacho.png">
</body>
img {
filter: blur();
}
The blur function makes an image blurry. To use it, we add a number in pixels inside the parentheses, like 2px.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Filter-shop</h3>
<p>Out of focus filter added</p>
<img src="https://mimo.app/i/nacho.png">
</body>
img {
filter: blur(2px);
}
A high number, like 10px, makes an element very blurry since the number says how many pixels should blend together.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Filter-shop</h3>
<p>Out of focus filter added</p>
<img src="https://mimo.app/i/nacho.png">
</body>
img {
filter: blur(10px);
}