Glassmorphism в Tailwind CSS: как сделать «стеклянный» интерфейс

mr. Cooper • 4 дня назад • Веб-разработка

#TailwindCSS #Glassmorphism #WebDesign #UIUX #LandingPage

Glassmorphism в Tailwind CSS: как сделать «стеклянный» интерфейс

Glassmorphism - это стиль интерфейса, в котором элементы выглядят как матовое стекло: полупрозрачные карточки, размытие фона, мягкие границы и глубокие светящиеся слои. Он активно используется в современных SaaS-продуктах, AI-платформах и лендингах, потому что создаёт ощущение глубины и «дорогого» UI.

В этой статье разберём, как собрать полноценный landing page в стиле glassmorphism на Tailwind CSS - пошагово, с разбором ключевых техник.

1. База проекта (HTML + Tailwind CDN)

Начнём с простого HTML-шаблона и подключения Tailwind через CDN:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>NeuroAI Landing</title>

  <script src="https://cdn.tailwindcss.com"></script>
</head>

На этом этапе Tailwind уже готов, можно сразу использовать utility-классы.

2. Фон - основа glassmorphism

Glassmorphism не работает без контрастного фона. Мы создаём тёмный градиент + цветные «световые пятна»:

<style>
  body {
    background: radial-gradient(circle at 20% 20%, #1b1b3a, #050510 60%);
  }
</style>

Добавляем «blobs» (размытые круги):

<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
  <div class="absolute w-[500px] h-[500px] bg-purple-500/30 blur-3xl rounded-full top-10 left-10"></div>
  <div class="absolute w-[400px] h-[400px] bg-blue-500/30 blur-3xl rounded-full bottom-10 right-10"></div>
</div>

Это создаёт ощущение глубины и мягкого свечения.

3. Ключ glassmorphism: стеклянные элементы

Главная магия - комбинация:

bg-white/5 (полупрозрачный фон)
backdrop-blur-xl (размытие фона)
border border-white/10 (тонкая граница)

Пример базовой glass-карточки:

<div class="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-6"></div>

Это уже полноценный «glass effect».

4. Навигация в стеклянном стиле

В шапке используем те же принципы:

<header class="flex justify-between items-center px-10 py-6">
  <h1 class="text-xl font-bold">NeuroAI</h1>

  <nav class="flex gap-8 text-sm text-white/70">
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">About</a>
  </nav>

  <button class="px-5 py-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition">
    Get Started
  </button>
</header>

Обрати внимание: даже кнопка - это стеклянный элемент.

5. HERO-блок (основной экран)

Структура: текст + glass-карточка справа.

<section class="grid md:grid-cols-2 gap-10 px-10 mt-10 items-center"></section>

Левая часть:

крупный заголовок
градиентные акценты
кнопки

Правая часть - glass card:

<div class="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-6 shadow-2xl"></div>

Внутри добавляем «данные», график и статистику - это усиливает ощущение продукта.

6. Как сделать «фейковый график»

Без библиотек, чисто Tailwind:

<div class="mt-6 h-24 flex items-end gap-2">
  <div class="w-4 h-10 bg-purple-400/60 rounded"></div>
  <div class="w-4 h-16 bg-purple-400/70 rounded"></div>
  <div class="w-4 h-12 bg-purple-400/60 rounded"></div>
  <div class="w-4 h-20 bg-purple-400 rounded"></div>
</div>

Это быстрый способ имитировать аналитическую панель.

7. Feature-блоки (микро glass cards)

<div class="bg-white/5 border border-white/10 backdrop-blur p-4 rounded-2xl">
  ⚡ Fast
</div>

Повторяем в grid - получается современный UI без сложной верстки.

8. Раздел About с усиленным blur

<div class="bg-white/5 border border-white/10 backdrop-blur-2xl rounded-3xl p-10 text-center"></div>

Увеличенный blur backdrop-blur-2xl делает блок «глубже» и визуально отделяет его от фона

9. Pricing с акцентом

Один из тарифов можно выделить цветом:

<div class="bg-purple-500/20 border border-purple-400 backdrop-blur p-6 rounded-2xl"></div>

Это типичный приём SaaS-лендингов: один «рекомендуемый» план.

10. Итоговый стек glassmorphism в Tailwind

Вот формула, которую можно использовать в любом проекте:

Базовый glass-card:

bg-white/5 backdrop-blur border border-white/10 rounded-2xl

Усиленный glass:

bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl

Акцентный glass:

bg-purple-500/20 backdrop-blur border border-purple-400

Заключение

Glassmorphism в Tailwind CSS - это не про сложный код, а про правильную комбинацию:

прозрачности (/5, /10)
blur (backdrop-blur)
тонких границ
глубины через фон

На практике ты можешь собрать полноценный SaaS-лендинг буквально из этих 4 приёмов - как в примере выше.