How to create a box shadow with theme variables

  • Neville

    1 day ago

    Hello folks!
    I need some help using the new themes to create a box shadow for a component (or any div).

    The resulting CSS should be "box-shadow: 0 10px 25px rgba(15,23,42,.08)".

    I've tried creating a "syntax any" variable containing "box-shadow: 0 10px 25px rgba(15,23,42,.08)" and then adding that as a CSS variable to a div, but nothing happens (visually).

    I suspect I may not be using the CSS variable correctly.

    Can anyone point me in the right direction please?
    Thanks!
  • /attachments/1475933591983624203/1475945720157704212/image.png

    Bobby Randhawa

    1 day ago

    Using your example you make a token using the "Any (*)" syntax and "0 10px 25px rgba(15,23,42,.08)" as your value. Then apply it by entering it in thee css style panel as "box-shadow: var(--token-name);"
    image.png
    😍1
  • Neville

    1 day ago

    that works, thanks Bobby!
  • Bobby Randhawa

    1 day ago

    No worries, glad to hear!

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.