Liquid Glass Generator - Create Apple-Style Glass Effects

Create stunning liquid glass effects with real-time preview. Export clean code for React, Vue, and Flutter. The most advanced liquid glass generator online.

Real-time Preview
Multi-platform Export
Apple Design System

🖼️Preview Background

Design System Presets

Glass Parameters

10%
💡 Lower = more transparentPerfect
20px
💡 Sweet spot: 8-15pxOK
5
💡 Controls shadow intensityRecommended

📐 Size & Shape

300px
💡 Fits preview area
180px
💡 Optimal for components
24px

🧩 Component Type

🌟 Shadow Type

🎨 Background Color

10%
💡 Controls background visibilitySubtle

✨ Visual Effects

🎬 Animation & Interaction

300ms

Live PreviewReal-time

Liquid Glass Card

10% transparency, 20px blur

Action
Primary

Export Code

🎨 Styles

⚛️ Components

📱 Mobile

liquid-glass-css-1750071339903.css
.liquid-glass { width: 300px; height: 180px; padding: 24px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 10px 40px rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16666666666666666), transparent 50%); transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1); cursor: pointer; } .liquid-glass:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-4px); filter: none; }
CSS

💡 Export Tips

  • • CSS: Perfect for static websites and simple implementations
  • • React: Includes TypeScript types and proper component structure
  • • Vue: Uses Composition API with TypeScript support
  • • Flutter: Ready-to-use widget with proper state management

💡Quick Guide

🎯Best Practices

Perfect Range:Transparency: 5-15%, Blur: 8-15px
Vision Pro Effect:Best for AR/VR and spatial interfaces
Mobile Friendly:Keep blur under 20px for performance

🚀Perfect For

iOS Apps
Navigation bars, modals
Web Cards
Dashboard components
AR/VR UI
Spatial interfaces
Landing Pages
Hero sections, CTAs

⚡Quick Actions

📦Export Tips

Static websitesCSS
React projectsReact TS
Mobile appsFlutter
Utility-firstTailwind

Quick Actions