Blur div

  • ssssadsadasd

    1 month 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
  • Tom Ireland

    1 month 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.
    πŸ‘1
  • /attachments/1316823718873534514/1316827340692783115/image.png

    ssssadsadasd

    1 month ago

    @Tom Ireland
    thanks. I added the backdrop but how should I add the css. my way did not solve the problem.
    image.png
  • image.png
  • Lucas G

    1 month 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
    πŸ˜‚1
  • ssssadsadasd

    1 month 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
  • Lucas G

    1 month ago

    By transparent I meant it should have no background color
  • /attachments/1316823718873534514/1316830898603294771/image.png

    ssssadsadasd

    1 month ago

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

    1 month ago

    Great energy @ssssadsadasd! Your continuous contribution to the toddle Community just made you advance to Community Level 5!
  • Lucas G

    1 month ago

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

    1 month ago

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

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.