Pricing Blog

Blur div

  • ssssadsadasd-1316823718873534514

    ssssadsadasd

    6 months ago

    In bubble I can add blur to a group by writing this code:

    <style>
    #blur {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);}
    #blur1 {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);}
    </style>

    I am not sure how/where to insert it in tooddle to add blur to a div. do you have any input?

    thanks
  • tomthebigtree-1316824539304296530

    Tom Ireland

    6 months ago

    Yes, this is possible in toddle. You can use the ::backdrop psuedo selector in the Styles panel but you'll need to add backdrop-filter manually in the CSS panel iirc as I don't think that's an available UI style option just now.
  • ssssadsadasd-1316827341183385642

    ssssadsadasd

    6 months ago

    @Tom Ireland
    thanks. I added the backdrop but how should I add the css. my way did not solve the problem.
    1316827340692783115-image.png
  • 1316827541620654141-image.png
  • lucasg-1316828173681299507

    Lucas G

    6 months ago

    Just add the CSS to the element you want to apply the blur to
  • The element should be transparent and on top of the other content
  • So probably absolute position
  • Using pseudo elements is a fancy way of doing it
  • Tom is a fancy guy
  • ssssadsadasd-1316828916962430986

    ssssadsadasd

    6 months ago

    @Lucas G I made the element transparent. the element is sticky. I entered: backdrop-filter: blur.
    the element is simply transparent and I can see what goes below it
  • lucasg-1316830460663304192

    Lucas G

    6 months ago

    By transparent I meant it should have no background color
  • ssssadsadasd-1316830898796367913

    ssssadsadasd

    6 months ago

    @Lucas G yes, but it just is transparent.
    should I add anything else besides the blur in the css: like 20px or sth
    1316830898603294771-image.png
  • Tod-1316830900524154920

    Tod

    6 months ago

    Great energy @ssssadsadasd! Your continuous contribution to the toddle Community just made you advance to Community Level 5!
  • lucasg-1316831236316074056

    Lucas G

    6 months ago

    What you had in your original post
  • backdrop-filter: blur(10px)
  • Or whatever amount you want
  • ssssadsadasd-1316831416176214027

    ssssadsadasd

    6 months ago

    ah sorry silly me: should have done it myself. thanks