Desfoque da imagem de background

Ola! Estou fazendo um projetinho para aplicar o conhecimento passado nas aulas de html e css e me surgiu uma duvida eu adicionei uma imagem para o background diretamente no css atrelada a tag main e eu queria adicionar um desfoque nela sem q alterasse os outros elementos da tag main o que posso fazer?

        <main>
            <section class="conteudo">
                <img class="imagem-conteudo" src="imagem_doce1.jpg" alt="imagem bolo piscina">

                <h1>Sobre nós</h1>

                <p >A Confeitaria Sem Sal está a 18 anos no mercado entregando produtos de ótima qualidade e com uma estética delicada para alegrar ainda mais suas festas! Nossa missão é fazer você e seus convidados felizes através da nossa arte da confeitaria entregando sabores que você nunca irá esquecer.</p>
            </section>
            <section class="mapa" >
                <h2>Venha nos conhecer!</h2>
                <iframe class="mapa-conteudo" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19991.141324089294!2d-49.06882526254518!3d-22.337391818556913!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9a34c30518a523d6!2sBauru%20Shopping!5e0!3m2!1spt-BR!2sbr!4v1622922005928!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </section>        
        </main>

insira seu código aqui

Css

main{
    background-image: url("imagem_doce14.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;    
}