Kreator Kart Glass

Projektuj karty glassmorphism z blurem i gradientami.

Właściwości karty

Rozmycie tła: 10px

Nieprzezroczystość tła: 7%

Nieprzezroczystość obramowania: 30%

Promień zaokrąglenia: 20px

Szerokość obramowania: 1px

Nieprzezroczystość wewnętrznego blasku: 5%

Odcień tła

Odcień obramowania

Zawartość elementów karty

Szklana karta

Premium interaktywny komponent z subtelnym załamaniem i akcentami obramowania.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Jak to działa

Dostosuj rozmycie, rozświetlenia, wewnętrzne poświaty i tło dla karty w stylu glassmorphism.
Obserwuj aktualizujący się podgląd na żywo podczas regulacji.
Dopasuj efekt do swojego projektu.
Skopiuj czysty kod HTML, CSS lub konfigurację Tailwind.

Do czego służy

Zbudowanie karty z efektem matowego szkła do nowoczesnego interfejsu.
Uzyskanie produkcyjnego CSS dla efektu glassmorphism.
Wyeksportowanie gotowego dla Tailwind komponentu szkła.

Warto wiedzieć

Efekt szkła opiera się na backdrop-filter i zajętym tle za nim — na płaskim kolorze efekt jest subtelny.
Wsparcie dla backdrop-filter bywa różne; przetestuj w docelowych przeglądarkach i zapewnij wariant zastępczy.

Najczęstsze pytania

Jaki wynik mogę skopiować?

Czysty HTML, zwykły CSS lub konfigurację Tailwind — cokolwiek pasuje do Twojego stosu.

Dlaczego szkło wygląda płasko na mojej stronie?

Glassmorphism potrzebuje treści wizualnej za sobą, aby ją rozmyć. Na jednolitym tle nie ma czego matowić, więc umieść je nad obrazem lub gradientem.

Czy cokolwiek jest przesyłane?

Nie. Kreator działa w całości w Twojej przeglądarce.

Powiązane narzędzia

Przeglądarka DXF

Paleta Kolorów

Konwerter Kolorów

Generator Box Shadow CSS

Sprawdzanie Kontrastu