Skip to main content

Frosted Glass Card

The Frosted Glass Card wraps a value in a frosted, translucent panel over a vivid colored card, giving a premium, modern look to a headline field. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a text column. A soft white panel sits over a colored card with a gentle shadow, so a featured item reads like a polished tile.
Author
SharePoint Maven
Built with
Features
JSON, Single Line of Text Column
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • Wraps a value in a frosted, translucent panel on a colored card
  • Gives a premium, modern look to a headline field
  • A soft shadow lifts the card off the row
  • The card color and label are set in the JSON
  • A stylish treatment for featured or hero items
  • Applied as column-formatting JSON on a text column, so it changes nothing about the underlying data

Common Use Cases

  • Featured or hero items on a list
  • Release or launch names
  • Highlighted announcements
  • Premium or flagship products
  • Spotlight entries on a directory
  • Any text field you want to feature with a card

Details

  • Design Pattern: Cards & Tiles
  • Format Scope: Column

Required Columns

Display nameColumn typeInternal name
ReleaseSingle line of text[Title]

Prerequisites

  1. Build a list with a text column before you paste the JSON.
  2. Then populate the list with values.
  3. Because the JSON is applied at the column level, the text column can use any name you want.
  4. The card color and the sub-label live in the JSON – change them to match your brand.

How to Apply JSON code

  1. On the Release column, open the column header menu, choose Column settings, then Format this column.
  2. Switch to Advanced mode.
  3. Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "padding": "4px 0"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "inline-block",
        "padding": "8px",
        "border-radius": "11px",
        "background-color": "#5b46d9",
        "box-shadow": "0 4px 12px rgba(91,70,217,0.35)"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "padding": "7px 12px",
            "border-radius": "8px",
            "background-color": "rgba(255,255,255,0.22)",
            "border": "1px solid rgba(255,255,255,0.45)"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "@currentField",
              "style": {
                "font-size": "13px",
                "font-weight": "700",
                "color": "#ffffff",
                "white-space": "nowrap",
                "text-shadow": "0 1px 2px rgba(0,0,0,0.18)"
              }
            },
            {
              "elmType": "div",
              "txtContent": "Featured",
              "style": {
                "font-size": "10px",
                "font-weight": "600",
                "color": "#ffffff",
                "opacity": "1",
                "text-align": "center",
                "margin-top": "2px",
                "text-shadow": "0 1px 2px rgba(0,0,0,0.15)"
              }
            }
          ]
        }
      ]
    }
  ]
}

Common Questions About the Frosted Glass Card

What is the Frosted Glass Card built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a text field shown as a premium frosted card without ongoing development overhead.

What columns does it need?

It needs one text column, where the JSON is applied. The card is drawn around whatever value that column holds, so no other column is required.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can I change the color or label?

Yes. The card color and the small sub-label are set in the JSON. Change them to match your brand or to relabel the card.

Can Greg build a design like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.