Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.
| 6 | transition: background-color 300ms ease, color 300ms ease; |
| 7 | } |
| 8 | .site-dark { |
| 9 | background: #09090c; |
| 10 | color: #f5f4f7; |
| 11 | } |
| 12 | .site-light { |
| 13 | background: #f3f1ee; |
| 14 | color: #17161a; |
| 15 | } |
| 16 |
| 17 | /* Flat surfaces for code and notes, so the glass is the only glass on the page. */ |
| 18 | .code, |
| 19 | .panel { |
| 20 | background: rgb(255 255 255 / 0.05); |
| 21 | box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); |
| 22 | } |
| 23 | .site-light .code, |
| 24 | .site-light .panel { |
| 25 | background: rgb(255 255 255 / 0.7); |
| 26 | box-shadow: inset 0 0 0 1px rgb(20 18 30 / 0.08); |
| 27 | } |
| 28 | .code { |
| 29 | border-radius: 20px; |
| 30 | } |
| 31 | .code pre, |
| 32 | .code code { |
| 33 | font-family: inherit; |
| 34 | } |
| 35 |
| 36 | .range { |
| 37 | width: 100%; |
| 38 | accent-color: currentColor; |
| 39 | } |
| 40 |
| 41 | /* The page the glass bends: drifting colour, fine lines, large type. */ |
| 42 | .scene { |
| 43 | position: absolute; |
| 44 | inset: 0; |
| 45 | overflow: hidden; |
| 46 | } |
| 47 | .scene-dark { |
| 48 | background: #0d0c12; |
| 49 | } |
| 50 | .scene-light { |
| 51 | background: #f7f4ef; |
| 52 | } |
| 53 | .scene-blob { |
| 54 | position: absolute; |
| 55 | aspect-ratio: 1; |
| 56 | border-radius: 9999px; |
| 57 | filter: blur(42px); |
| 58 | animation: scene-drift 18s ease-in-out infinite alternate; |
| 59 | } |
| 60 | .scene-blob-a { |
| 61 | width: 48%; |
| 62 | left: -8%; |
| 63 | top: -14%; |
| 64 | background: #ff4fa3; |
| 65 | } |
| 66 | .scene-blob-b { |
| 67 | width: 42%; |
| 68 | right: -6%; |
| 69 | top: 6%; |
| 70 | background: #4f7dff; |
| 71 | animation-duration: 23s; |
| 72 | animation-direction: alternate-reverse; |
| 73 | } |
| 74 | .scene-blob-c { |
| 75 | width: 40%; |
| 76 | left: 30%; |
| 77 | bottom: -30%; |
| 78 | background: #ffb52e; |
| 79 | animation-duration: 27s; |
| 80 | } |
| 81 | .scene-light .scene-blob { |
| 82 | opacity: 0.6; |
| 83 | } |
| 84 | .scene-grid { |
| 85 | position: absolute; |
| 86 | inset: 0; |
| 87 | background-image: |
| 88 | repeating-linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 1.5px, transparent 1.5px 32px), |
| 89 | repeating-linear-gradient(0deg, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 32px); |
| 90 | } |
| 91 | .scene-light .scene-grid { |
| 92 | background-image: |
| 93 | repeating-linear-gradient(90deg, rgb(20 18 30 / 0.28) 0 1.5px, transparent 1.5px 32px), |
| 94 | repeating-linear-gradient(0deg, rgb(20 18 30 / 0.08) 0 1px, transparent 1px 32px); |
| 95 | } |
| 96 | .scene-words { |
| 97 | position: absolute; |
| 98 | inset: 0; |
| 99 | display: flex; |
| 100 | flex-direction: column; |
| 101 | justify-content: center; |
| 102 | padding: 0 6%; |
| 103 | font-size: clamp(56px, 10vw, 128px); |
| 104 | font-weight: 700; |
| 105 | line-height: 0.92; |
| 106 | letter-spacing: -0.045em; |
| 107 | color: rgb(255 255 255 / 0.94); |
| 108 | } |
| 109 | .scene-light .scene-words { |
| 110 | color: #16141c; |
| 111 | } |
| 112 | @keyframes scene-drift { |
| 113 | to { |
| 114 | transform: translate(9%, 7%) scale(1.14); |
| 115 | } |
| 116 | } |
| 117 |
| 118 | /* Menu contents fade and zoom; the glass under them materializes from script. |
| 119 | The menu itself must not fade or scale, or the glass would vanish with it. */ |
| 120 | .menu-content { |
| 121 | animation: menu-content-in 240ms cubic-bezier(0.22, 1, 0.36, 1); |
| 122 | transform-origin: top right; |
| 123 | } |
| 124 | .menu-content-leaving { |
| 125 | opacity: 0; |
| 126 | scale: 0.97; |
| 127 | transition: opacity 160ms ease, scale 160ms ease; |
| 128 | } |
| 129 | @keyframes menu-content-in { |
| 130 | from { |
| 131 | opacity: 0; |
| 132 | scale: 0.96; |
| 133 | } |
| 134 | } |
| 135 |
| 136 | @media (prefers-reduced-motion: reduce) { |
| 137 | .scene-blob, |
| 138 | .menu-content { |
| 139 | animation: none; |
| 140 | } |
| 141 | } |
| 142 |