The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="scene">
  <span class="orb orb-a"></span>
  <span class="orb orb-b"></span>
  <article class="glass">
    <span class="tag">Pro plan</span>
    <h3>Glass card</h3>
    <p>Content stays readable while the background shows through.</p>
    <a href="#">Learn more &rarr;</a>
  </article>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a glassmorphism card with HTML and CSS.

Requirements:
- A dark page (#0b1020) with two solid colour circles (orange #ff7b00 and indigo #2506ad) positioned behind the card so the blur is visible.
- The card: 32px padding, 24px radius, background rgba(255,255,255,0.1), 1px border rgba(255,255,255,0.25), backdrop-filter: blur(18px) saturate(140%) (with the -webkit- prefix), and a large soft shadow.
- Inside: a small translucent pill tag "Pro plan", a heading "Glass card", one sentence of text at 80% white, and a "Learn more ->" link.
- Card width: min(90vw, 420px), centred.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Place something colourful behind the card. Glassmorphism only shows when there is detail to blur.

2. 2

   Give the card a semi-transparent white background (10% opacity).

3. 3

   Add backdrop-filter: blur(). This blurs what is behind the element, unlike filter: blur() which blurs the element itself.

4. 4

   Add a thin, light, semi-transparent border to suggest the edge of a glass pane.

5. 5

   Include the -webkit-backdrop-filter prefix for Safari.

Customisation tips

• Check text contrast carefully; glass over a busy image can make text hard to read.
• Increase background opacity to 0.2 on light pages for a milkier glass.
• backdrop-filter is costly on large areas; use it on cards and navbars, not full-page overlays.

More components