Как создать несколько эффектов теней (DROP-shadow)?

Свойство filter поддерживает несколько фильтров, поэтому вы можете несколько раз использовать drop-shadow:

filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);

Для различных классов можно определить фильтры следующим образом:

.gray {
  -webkit-filter: drop-shadow(3px 3px 5px #000000);
  filter: drop-shadow(3px 3px 5px #000000);
}
.yellow {
  -webkit-filter: drop-shadow(2px 2px 2px #ffcc00);
  filter: drop-shadow(2px 2px 2px #ffcc00);
}
.gray-yellow {
  -webkit-filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);
  filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);
}

Таким образом, вы можете использовать разные классы для отдельных элементов:

<span class="gray">Hello world</span>
+ <span class="yellow">Hello world</span>
= <span class="gray-yellow">Hello world</span>

В результате, элемент с классом gray-yellow будет иметь тени, описанные в обоих фильтрах drop-shadow.

Чтобы разделить каждый фильтр пробелом, просто убедитесь, что между ними есть пробел. В вашем случае фильтр drop-shadow уже правильно разделен:

filter: drop-shadow(0px 0px 8px #7f6400) drop-shadow(0px 0px 8px #7f6400);

Каждый фильтр drop-shadow разделён пробелом, что является корректным синтаксисом для CSS. Убедитесь, что вы соблюдаете правильный порядок и наличие пробелов, как показано выше.