{"id":77987,"date":"2026-03-19T16:10:40","date_gmt":"2026-03-19T10:40:40","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=77987"},"modified":"2026-03-25T14:32:27","modified_gmt":"2026-03-25T09:02:27","slug":"liquid-glass","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/liquid-glass\/","title":{"rendered":"Implementing Liquid Glass UI in Apple TV (tvOS)"},"content":{"rendered":"<p>Apple introduces a new design era for the user interface in WWDC25, called <a href=\"https:\/\/developer.apple.com\/documentation\/TechnologyOverviews\/liquid-glass\">Liquid Glass<\/a>. This modern UI design is evolving towards depth, transparency and layered visuals. Liquid Glass is a combined immersive effect of glass and fluid elements.<br \/>\nLiquid Glass is also known as frost glass or blur glass.<\/p>\n<p>In this blog, I will explain everything about liquid glass with an example. So let\u2019s get started&#8230;&#8230;.<\/p>\n<h2><strong>What is Liquid Glass UI?<\/strong><\/h2>\n<p>Liquid Glass UI is a design style that uses transparency and background blur to create a frosted glass look.<br \/>\nInstead of using solid panels, it uses semi transparent layers so you can still see a bit of the background while clearly separating the main content in front.<\/p>\n<h2><strong>Core Components of Liquid Glass UI<br \/>\n<\/strong><\/h2>\n<ul>\n<li><strong>Translucency &#8211;<\/strong> Semi transparent surface<\/li>\n<li><strong>Background<\/strong> <strong>Blur<\/strong> <strong>&#8211;<\/strong> Frosted glass effect from content behind<\/li>\n<li><strong>Depth &amp; Elevation<\/strong> <strong>&#8211;<\/strong> Rounded corners, shadows, scaling<\/li>\n<li><strong>Vibrancy (Optional) &#8211;<\/strong>\u00a0Enhances text and icons for readability<\/li>\n<\/ul>\n<div id=\"attachment_78588\" style=\"width: 731px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-78588\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-78588 \" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Gemini_Generated_Image_zkbpyzkbpyzkbpyz.png\" alt=\"Liquid Glass Flow\" width=\"721\" height=\"402\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Gemini_Generated_Image_zkbpyzkbpyzkbpyz.png 1376w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Gemini_Generated_Image_zkbpyzkbpyzkbpyz-300x167.png 300w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Gemini_Generated_Image_zkbpyzkbpyzkbpyz-1024x572.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Gemini_Generated_Image_zkbpyzkbpyzkbpyz-768x429.png 768w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Gemini_Generated_Image_zkbpyzkbpyzkbpyz-624x348.png 624w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><p id=\"caption-attachment-78588\" class=\"wp-caption-text\">Liquid Glass Flow<\/p><\/div>\n<h2>Traditional UI vs Liquid Glass UI<\/h2>\n<table style=\"border-collapse: collapse; width: 43.516%; height: 187px;\">\n<thead>\n<tr style=\"border-style: solid; border-color: #827f7f; background-color: #cbd6f2;\">\n<td style=\"width: 50%; text-align: center; height: 24px;\"><span style=\"color: #333333;\"><strong>Traditional UI<\/strong><\/span><\/td>\n<td style=\"width: 50%; text-align: center; border-color: #827f7f; border-style: solid; height: 24px;\"><span style=\"color: #333333;\"><strong>Liquid Glass UI<\/strong><\/span><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 24px;\">\n<td style=\"width: 50%; height: 24px; border-color: #000000; border-style: solid; vertical-align: middle;\"><span style=\"color: #333333;\">\u00a0 \u00a0Solid backgrounds<\/span><\/td>\n<td style=\"width: 50%; height: 24px; border-color: #000000; border-style: solid; vertical-align: middle;\"><span style=\"color: #333333;\">\u00a0 \u00a0Blended with background<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 50%; border-color: #000000; border-style: solid; vertical-align: middle; height: 24px;\"><span style=\"color: #333333;\">\u00a0 \u00a0Clear separation from content<\/span><\/td>\n<td style=\"width: 50%; border-color: #000000; border-style: solid; vertical-align: middle; height: 24px;\"><span style=\"color: #333333;\">\u00a0 \u00a0Dynamic and layered<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 50%; border-color: #000000; border-style: solid; vertical-align: middle; height: 24px;\"><span style=\"color: #333333;\">\u00a0 \u00a0Predictable but static<\/span><\/td>\n<td style=\"width: 50%; border-color: #000000; border-style: solid; vertical-align: middle; height: 24px;\"><span style=\"color: #333333;\">\u00a0 \u00a0Feels modern and premium<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 50%; border-color: #000000; border-style: solid; vertical-align: middle; height: 24px;\"><span style=\"color: #333333;\">\u00a0 \u00a0Easier to implement<\/span><\/td>\n<td style=\"width: 50%; border-color: #000000; border-style: solid; vertical-align: middle; height: 24px;\"><span style=\"color: #333333;\">\u00a0 \u00a0Requires design precision<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><strong><br \/>\nHow to implement Liquid Glass Effect on UI Components<\/strong><\/h2>\n<p><strong>1. <span style=\"text-decoration: underline;\">Creating the Glass Surface (Blur Layer)<\/span> &#8211;<\/strong> This is foundation layer which used to create blur effect. Apple provides <a href=\"https:\/\/developer.apple.com\/documentation\/uikit\/uivisualeffectview\">UIVisualEffectView<\/a> class which is used to render real time blur effect on view.<\/p>\n<pre style=\"padding-left: 80px;\">class LiquidGlassView: UIView {\r\n\r\n\u00a0 \u00a0 private var blurView: UIVisualEffectView!\r\n\r\n  \u00a0 override init(frame: CGRect) {\r\n  \u00a0 \u00a0 \u00a0 super.init(frame: frame)\r\n  \u00a0 \u00a0 \u00a0 setupGlassEffect()\r\n  \u00a0 }\r\n\r\n  \u00a0 required init?(coder: NSCoder) {\r\n  \u00a0 \u00a0 \u00a0 super.init(coder: coder)\r\n  \u00a0 \u00a0 \u00a0 setupGlassEffect()\r\n  \u00a0 }\r\n\r\n  \u00a0 private func setupGlassEffect() {\r\n  \u00a0 \u00a0 \u00a0 let blurEffect = UIBlurEffect(style: .light)\r\n  \u00a0 \u00a0 \u00a0 blurView = UIVisualEffectView(effect: blurEffect)\r\n  \u00a0 \u00a0 \u00a0 blurView.frame = bounds\r\n  \u00a0 \u00a0 \u00a0 blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]\r\n  \u00a0 \u00a0 \u00a0 addSubview(blurView)\r\n  \u00a0 \u00a0 \u00a0 layer.cornerRadius = 24\r\n\u00a0 \u00a0 \u00a0 \u00a0 clipsToBounds = true\r\n\r\n  \u00a0 }\r\n}\r\n\r\n\r\n<\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>2. <span style=\"text-decoration: underline;\">Adding Glass Border and Depth<\/span> &#8211; <\/strong><a href=\"https:\/\/developer.apple.com\/documentation\/quartzcore\/calayer\">CALayer<\/a> is used to apply a border, shadow and corner styling, Which creates a depth and simulates real glass like look for UI components.<\/p>\n<pre style=\"padding-left: 80px;\">layer.borderWidth = 1\r\nlayer.borderColor = UIColor.white.withAlphaComponent(0.25).cgColor\r\n\r\nlayer.shadowColor = UIColor.black.cgColor\r\nlayer.shadowOpacity = 0.3\r\nlayer.shadowRadius = 20\r\nlayer.shadowOffset = CGSize(width: 0, height: 10)\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>3. <\/strong><span style=\"text-decoration: underline;\"><strong>Vibrancy for Text and Icons<\/strong><\/span><strong> &#8211;<\/strong> <a href=\"https:\/\/developer.apple.com\/documentation\/UIKit\/UIVibrancyEffect\">UIVibrancyEffect<\/a> is used provide vibrancy effects for text and icon above the blur background. Which helps to improve visibility and readability.<\/p>\n<pre style=\"padding-left: 80px;\">let vibrancyEffect = UIVibrancyEffect(blurEffect: UIBlurEffect(style: .light))\r\nlet vibrancyView = UIVisualEffectView(effect: vibrancyEffect)\r\n\r\nvibrancyView.frame = bounds\r\nblurView.contentView.addSubview(vibrancyView)\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>4. <span style=\"text-decoration: underline;\">Focus Animation (tvOS Interaction)<\/span> &#8211;\u00a0<\/strong> <a href=\"https:\/\/www.tothenew.com\/blog\/apple-tv-focus-engine-step-by-step-guide-for-developers\/\">Focus engine<\/a> is used to navigate focus one to other UI Component.<\/p>\n<pre style=\"padding-left: 80px;\">override func didUpdateFocus(in context: UIFocusUpdateContext, \r\n                             with coordinator: UIFocusAnimationCoordinator) {\r\n\r\n   if context.nextFocusedView == self {\r\n      coordinator.addCoordinatedAnimations({\r\n         self.transform = CGAffineTransform(scaleX: 1.08, y: 1.08)\r\n         self.layer.shadowOpacity = 0.5\r\n      })\r\n   } else {\r\n\r\n   coordinator.addCoordinatedAnimations({\r\n      self.transform = .identity\r\n      self.layer.shadowOpacity = 0.3\r\n   })\r\n }\r\n}\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h2><strong>Demo Project<\/strong><\/h2>\n<p>This demo shows a simple Liquid Glass UI for tvOS using UIKit, with a transparent glass panel and blur effects. It also includes focus animations to create a smooth and engaging Apple TV experience.<strong>GitHub Link<\/strong>:\u00a0<a href=\"https:\/\/github.com\/shephaliTTN\/Liquid_Glass_Demo\">https:\/\/github.com\/shephaliTTN\/Liquid_Glass_Demo<\/a><\/p>\n<div id=\"attachment_78640\" style=\"width: 777px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-78640\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-78640\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Adobe-Express-Screen-Recording-2026-03-17-at-2.57.39\u202fAM-1-1.gif\" alt=\"Demo: Liquid Glass UI\" width=\"767\" height=\"432\" \/><p id=\"caption-attachment-78640\" class=\"wp-caption-text\">Demo: Liquid Glass UI<\/p><\/div>\n<h2>Pros and Cons of Liquid Glass UI<\/h2>\n<h3>Pros:<\/h3>\n<ul>\n<li>Modern and premium visual appeal<\/li>\n<li>Creates an immersive, engaging experience<\/li>\n<li>Keeps content (especially video) as the primary focus<\/li>\n<li>Smooth, fluid animations enhance interaction<\/li>\n<\/ul>\n<h3><strong>Cons:<\/strong><\/h3>\n<ul>\n<li>Transparency can reduce readability in some cases<\/li>\n<li>Higher performance requirements (GPU-intensive effects)<\/li>\n<li>More complex to design and implement<\/li>\n<li>Requires careful balance to avoid visual clutter<\/li>\n<\/ul>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>Liquid Glass UI is more than just a visual effect, it is a combination of translucency, blur and depth that enhances how users perceive and interact with your interface. When implemented using system materials and best practices, it delivers a modern layered experience without compromising performance or accessibility.<\/p>\n<p>The key is to use it thoughtfully keep it consistent, optimise for performance and ensure readability. Done right, Liquid Glass can significantly improve focus, hierarchy and the overall user experience of your application.<\/p>\n<p><strong>Happy coding!!!<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apple introduces a new design era for the user interface in WWDC25, called Liquid Glass. This modern UI design is evolving towards depth, transparency and layered visuals. Liquid Glass is a combined immersive effect of glass and fluid elements. Liquid Glass is also known as frost glass or blur glass. In this blog, I will [&hellip;]<\/p>\n","protected":false},"author":2075,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[3477],"tags":[8409,8408,8407,4848,7799,8406,2715,3531,7063,8486],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/77987"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2075"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=77987"}],"version-history":[{"count":31,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/77987\/revisions"}],"predecessor-version":[{"id":79124,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/77987\/revisions\/79124"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=77987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=77987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=77987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}