Peach Lab
← Back to homeView all tools

Background Tools

Glassmorphism Generator

Create frosted glass CSS effects for cards, panels, and modern UI layouts.

Glass Preview

Create frosted glass effects for cards, panels, and modern UI layouts.

◫

Glass Card

Soft, clean, and modern UI effect.

CSS Glass Effect

.glass-background {
  background: linear-gradient(135deg, #F28C6F, #FFD6C8);
}

.glass-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.2);
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.11666666666666667) 38%, transparent 72%);
}