Liquid Glass Switch

Bring Apple-inspired Liquid Glass interface from iOS 26 to your Framer projects with this premium toggle switch component. Featuring authentic glass morphism effects with dynamic refraction, 3D perspective animations, and multi-layered lighting that perfectly mimics real glass materials.​​

Key Features:

Authentic Liquid Glass Effect - Precise recreation of Apple-inspired iOS 26 design language with translucent aesthetics and realistic glass physics​​

3D Perspective Animation - Dynamic rotation and scaling effects during toggle transitions with smooth 0.7s cubic-bezier easing for buttery-smooth interactions​

Chromatic Aberration - Subtle displacement mapping and color separation for realistic glass refraction effects that mimic real-world light behavior​

Advanced Color Control - Customize both on/off states with dual gradient controls (start and end colors) plus independent dot color customization with full alpha support​

Interactive States - Smooth hover and toggle animations with specular highlights, backdrop filter effects, and dynamic glass morphing​

Event Handler Support - Built-in onToggle callback for seamless integration with your Framer interactions, logic, and state management​

Performance Optimized - Lightweight SVG filters with GPU-accelerated animations running at smooth 60fps with scoped CSS to prevent style conflicts​

Apple-Inspired Lighting - Multi-directional highlights and curved reflections matching Apple-inspired design principles with authentic specular effects​

Perfect for modern dashboards, settings panels, preference controls, form interfaces, and any design requiring Apple-inspired translucent aesthetics. The component features dynamic glass morphing with realistic light refraction that adapts beautifully to any background, maintaining visual excellence in both light and dark themes.​​

Component Controls:

What's Included:

Complete code component ready for Framer with no external dependencies or additional setup required​

Comprehensive property controls for easy customization through Framer's visual interface​

Dual gradient color controls for both on and off states with 8 total color customization options​

Event handler for toggle state changes with full callback support​

Performance-optimized with scoped CSS and unique filter IDs to prevent conflicts in complex projects​

Transform your designs with the same liquid glass effect that defines Apple-inspired interface language. Simply drop into your Framer project and customize to match your brand identity - no coding knowledge required.​