Проблема

Во время разработки (npm run dev) эффект glassmorphism работает нормально:

.glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

Но после production build (npm run build) blur исчезает.
В итоговом CSS остаётся только:

-webkit-backdrop-filter: blur(20px);

а обычный:

backdrop-filter: blur(20px);

удаляется автоматически.

В результате элемент становится просто полупрозрачным без blur-эффекта.

---

Причина

Проблема не в CSS и не в браузере.

Причина — CSS minifier / optimizer внутри Vite.

Некоторые версии Vite или используемый CSS optimizer могут считать backdrop-filter неподдерживаемым или «лишним» свойством и удалять его во время production build.

Особенно это проявляется при:

• CSS Modules
• Lightning CSS
• агрессивной минификации
• старом browserslist target

---

Как проверить проблему

После build открыть итоговый CSS файл и проверить:

Было:

backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

Стало:

-webkit-backdrop-filter: blur(20px);

Если обычный backdrop-filter исчез — проблема именно в minifier.

---

Решение

Вариант 1 — отключить CSS minify

В vite.config.js:

build: {
  cssMinify: false
}

Полный пример:

build: {
  outDir: 'dist',
  sourcemap: true,

  cssTarget: 'chrome111',
  cssMinify: false,
}

После этого blur начинает работать корректно.

---

Почему это помогает

При отключении CSS minify Vite перестаёт переписывать и удалять CSS свойства.

backdrop-filter остаётся в итоговом bundle без изменений.

---

Дополнительные советы

Используйте оба свойства

Для лучшей совместимости:

.glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

---

Не используйте слишком большой blur

Плохо:

blur(40px)
blur(60px)

Почему:

• высокая нагрузка на GPU
• лаги на мобильных
• мыльный интерфейс

Оптимально:

blur(16px)
blur(20px)
blur(24px)

---

Хороший glassmorphism стиль

.glass {
  background: rgba(255,255,255,.18);

  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255,255,255,.25);

  box-shadow:
    0 8px 32px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.4);
}

---

Важно помнить

backdrop-filter размывает НЕ сам элемент, а то, что находится позади него.

Если фон однотонный:

body {
  background: white;
}

то blur будет почти незаметен.

Лучше использовать:

• изображения
• градиенты
• сложный background
• карточки поверх контента

---

Итог

Если backdrop-filter работает в dev режиме, но исчезает после build:

Проблема почти всегда в CSS minifier Vite.

Самое быстрое решение:

cssMinify: false

После этого glass blur начинает работать корректно и в production.