Skip to content

component

Liquid Glass Switch

By Syed Saboor

Details

Summary

Bring Apple-inspired Liquid Glass interface from iOS 26 to your Framer projects with this premium toggle switch component.

Description

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.​

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600161538/148/228/309/79/15
  • All · #6150