Draggable Glow Edge

├── .gitignore ├── README.md ├── canvasTest.html ├── index.html └── edgeTest.html /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # env files (can opt-in for commiting if needed) 33 | .env* 34 | 35 | # vercel 36 | .vercel 37 | 38 | # typescript 39 | *.tsbuildinfo 40 | next-env.d.ts 41 | 42 | .npm 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Liquid Glass 2 | 3 | 4 | An interactive demo of an **iOS 26–style Liquid Glass** effect for the web. 5 | Tweak inner shadows, tint, frost blur, noise distortion and swap out the background image—all live in your browser. 6 | 7 | ![liquid-glass](https://github.com/user-attachments/assets/7e1525c7-95a0-4a20-9f3b-ba58246f2f3a) 8 | 9 | 10 | - **Does not work on webkit/gecko - Only Chromium(blink) based browsers are supported. Please file issues if you spot any quirks or wish to improve or add more controls!** 11 | 12 | --- 13 | 14 | ## 🔗 Live Demo 15 | 16 | [Try it out here → https://liquid-glass-eta.vercel.app/](https://liquid-glass-eta.vercel.app/) 17 | 18 | --- 19 | 20 | ## 🚀 Features 21 | 22 | - **Inner Shadow** — blur, spread & color 23 | - **Glass Tint** — any RGB tint + opacity 24 | - **Frost Blur** — control the backdrop-filter blur 25 | - **Noise Distortion** — tweak SVG noise frequency & strength 26 | - **Background Image** — paste your own URL for the page backdrop 27 | - **Responsive** — desktop & mobile layouts 28 | 29 | --- 30 | 31 | ## 🛠 Usage 32 | 33 | 1. Open `index.html`. 34 | 2. Use the on-screen sliders and color pickers to adjust the effect. 35 | 36 | Or simply visit the **Live Demo** link above. 37 | 38 | --- 39 | 40 | ## 🙏 Inspiration 41 | 42 | Inspired by Apple’s upcoming **iOS 26 Liquid Glass** design. 43 | Thanks to [chakachuk’s CodePen demo](https://codepen.io/chakachuk/pen/QwbaYGO) for the original glass-distortion filter setup. 44 | 45 | --- 46 | 47 | ## ⚠️ Browser Support 48 | 49 | - **Tested on:** Chrome on macOS 50 | - **May not work in:** Safari (backdrop-filter and SVG filter support varies) 51 | -------------------------------------------------------------------------------- /canvasTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Draggable Glow Edge 8 | 77 | 78 | 79 | 80 | 83 | 84 |

85 | 86 |

87 |

88 |

89 |

90 |

91 |

92 | 93 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Liquid Glass 8 | 11 | 12 | 151 | 152 | 153 | 154 | 155 |

156 |

Inner Shadow

Glass Tint

163 | Tint Color: 165 | Opacity: % 166 | 167 |

Frost Blur

168 | Blur Radius: px 169 | 170 |

Noise Distortion

171 | Noise Freq: 173 | Strength: 174 | 175 | 177 | 178 |

Background Image

179 | URL: 180 |

181 | 182 |

183 | 184 | 194 | 195 | 277 | 278 | 279 | -------------------------------------------------------------------------------- /edgeTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Liquid Glass 8 | 11 | 12 | 151 | 152 | 153 | 154 | 155 |