PricingBlog

How to create a box shadow with theme variables

  • neville9288-1475933591983624203

    Neville

    3 hours 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!
  • bsr.24-1475945725589459076

    Bobby Randhawa

    3 hours 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);"
    1475945720157704212-image.png
    😍1
  • neville9288-1475954008492474481

    Neville

    2 hours ago

    that works, thanks Bobby!
  • bsr.24-1475954866441683004

    Bobby Randhawa

    2 hours ago

    No worries, glad to hear!