Cobalto
HTML + CSSLiquid Glass
Stained glass rose window
A leaded glass rose window: the sun follows the cursor and the petal you choose casts its color on the stone floor.
Settings
16px
1x
Code
<div class="uvq11-rose" style="--sel:var(--c1)"><i class="bm" aria-hidden="true"></i><svg class="rw" viewBox="-50 -50 100 100"><defs><filter id="uvq11-rose-f" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency=".16" numOctaves="2" seed="4" result="n"/><feColorMatrix in="n" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -.9 .72" result="w"/><feComposite in="w" in2="SourceGraphic" operator="in" result="m"/><feBlend in="m" in2="SourceGraphic" mode="screen"/></filter><radialGradient id="uvq11-rose-s"><stop offset="0" stop-color="#fffbe8"/><stop offset=".4" stop-color="#fff3c4" stop-opacity=".7"/><stop offset="1" stop-color="#fff3c4" stop-opacity="0"/></radialGradient></defs><circle r="48" fill="#141826"/><circle class="sun" cx="0" cy="-28" r="30" fill="url(#uvq11-rose-s)"/><g id="uvq11-rose-g" filter="url(#uvq11-rose-f)"><circle cx="16.5" cy="-28.6" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="33.0" cy="0.0" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="16.5" cy="28.6" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="-16.5" cy="28.6" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="-33.0" cy="0.0" r="5" fill="#e9b949" fill-opacity=".8"/><circle cx="-16.5" cy="-28.6" r="5" fill="#e9b949" fill-opacity=".8"/><g role="radiogroup" aria-label="Stained glass color"><path class="pt" role="radio" tabindex="0" aria-checked="true" aria-label="Cobalt" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(0)" style="fill:var(--c1)"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Ruby" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(60)" style="fill:var(--c2)"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Amber" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(120)" style="fill:#f59e0b"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Emerald" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(180)" style="fill:#059669"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Amethyst" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(240)" style="fill:#7c3aed"/><path class="pt" role="radio" tabindex="-1" aria-checked="false" aria-label="Turquoise" d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(300)" style="fill:#06b6d4"/></g><circle r="8.5" fill="#e9b949"/></g><g class="ld"><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(0)"/><path d="M0 -12V-44" transform="rotate(0)"/><circle cx="16.5" cy="-28.6" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(60)"/><path d="M0 -12V-44" transform="rotate(60)"/><circle cx="33.0" cy="0.0" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(120)"/><path d="M0 -12V-44" transform="rotate(120)"/><circle cx="16.5" cy="28.6" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(180)"/><path d="M0 -12V-44" transform="rotate(180)"/><circle cx="-16.5" cy="28.6" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(240)"/><path d="M0 -12V-44" transform="rotate(240)"/><circle cx="-33.0" cy="0.0" r="5"/><path d="M0 -10C13 -16 15 -36 0 -46C-15 -36 -13 -16 0 -10Z" transform="rotate(300)"/><path d="M0 -12V-44" transform="rotate(300)"/><circle cx="-16.5" cy="-28.6" r="5"/><circle r="8.5"/><circle r="47.5" stroke-width="3"/></g></svg><div class="fl" aria-hidden="true"><svg class="pj" viewBox="-50 -50 100 100"><use href="#uvq11-rose-g"/></svg></div><p class="nm" aria-live="polite">Cobalt</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
A Gothic rose window drawn in SVG with six petals of mottled glass, lead lines and small amber roundels. A noise filter gives the panes their antique texture, a soft sun moves behind them with the pointer, and a blurred copy of the window is projected onto the floor together with a beam in the selected color.
The two main colors fill the cobalt and ruby panes, and the rest keep their jewel tones. Petals behave as a radio group with arrow keys, so it can double as a theme or category picker for cultural sites, churches or games.