---
title: "Liquid Glass Switch — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Syed Saboor · Buttons. Bring Apple-inspired Liquid Glass interface from iOS 26 to your Framer projects with this premium toggle switch component."
canonical: "https://framer.elliotli.dev/component/liquid-glass-switch"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Liquid Glass Switch

# Liquid Glass Switch

[View on Framer](https://framer.com/marketplace/components/liquid-glass-switch/?via=elliot-li)

![Liquid Glass Switch preview image 1](https://framer.elliotli.dev/og/component/liquid-glass-switch/013eb5f34bb97dcb/1600x1200.jpg)

## 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:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-4uen18md-xCd2CnkNLtappd5AGqK4bFUZ0WnH7W)

## 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 [How rankings work →](/terms#rankings)

-   All · #7630

## Details

- **Author**: Syed Saboor
- **Price**: $5.00
- **Published**: 2025-10-24
- **Updated**: 2025-10-24
- **Added**: 2025-10-18
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow