skills.rest
pnp
pnpOFFICIAL
Explore all skills by this author →
Website𝕏@m365pnpGitHub

style-glassmorphism

Generates glassmorphism-style rowFormatter JSON for SharePoint list view formatting.

128|50|Updated May 4, 2026
Search Tags:#json#glassmorphism#sharepoint#UI styling#list formatting#view formatting#rowformatter
One-click install
npx skills add https://github.com/pnp/sharepoint-skills --skill style-glassmorphism-pnp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-glassmorphism
Source: https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-glassmorphism/style-glassmorphism
Command: npx skills add https://github.com/pnp/sharepoint-skills --skill style-glassmorphism-pnp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? SharePoint list views default to a plain column grid that looks dated. This Skill provides ready-to-adapt design tokens and a complete rowFormatter JSON template that renders list rows as floating glassmorphism cards with soft shadows, pill badges, and thin progress bars. ## Core Features & Use Cases - Style Tokens: Predefined badge, progress bar, deadline, and card tokens (colors, padding, border-radius, shadows) for a consistent frosted-glass look. - Complete rowFormatter JSON: A single-column stacked card layout with status pill, deadline with whispered overdue treatment, and full-width progress bar, ready to adapt to actual column names. - Responsive & Fallback Guidance: Mobile breakpoints under 480 px and a hairline-border fallback when SharePoint renderers strip box-shadow values. - Use Case: A content team tracking document approval status in a SharePoint list applies this template so each row appears as a floating card showing status, deadline, and completion percentage. ## Quick Start Apply the glassmorphism style to my SharePoint list view using the Status, Progress, and Deadline columns.

Frequently Asked Questions about style-glassmorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply a custom row layout to a SharePoint list view?▼

Use SharePoint view formatting with a rowFormatter JSON object that follows the v2 view-formatting schema. Replace the placeholder column names like [$Status] and [$Progress] with your list's actual internal column names, then paste the JSON into the view formatting pane.

What is glassmorphism styling in SharePoint list formatting?▼

Glassmorphism in list formatting uses soft diffused shadows, 16px rounded corners, barely-visible borders, and pill-shaped badges to make rows look like floating cards. This Skill provides the exact tokens and a complete rowFormatter template for that style.

Why is my box-shadow not rendering in SharePoint view formatting?▼

Some SharePoint themes and Modern view renderers strip multi-layer box-shadow values, causing cards to merge into the page. Add a 1px hairline border in rgba(0,0,0,0.06) to re-establish the card edge instead of switching to a hard shadow offset.

How do I show overdue dates in SharePoint list formatting?▼

Compare [$Deadline] with @now in an expression and conditionally change color, weight, border, and shadow. This template whispers overdue status with a lowercase italic label and a soft red-tinted card border rather than an aggressive warning badge.

Does SharePoint row formatting work on mobile screens?▼

Yes, but you should adapt the layout. Under 480 px, reduce card padding from 20px 24px to 12px 16px, hide the deadline sublabel while keeping the date, and keep touch targets at least 44 x 44 px.

Related Skills

Explore More Design & Creative Skills→
RorySullivan1RorySullivan1

sharepoint-column-formatting

Generates declarative JSON formatters that style SharePoint list columns and views.

Community
Intermediate
purduehackerspurduehackers
4

organization

Manage GitHub organization members, teams, and webhooks.

Official
Intermediate
webinywebiny
8.0k

webiny-form-model

Build declarative forms with field builders, layouts, validation, and dynamic zones in Webiny.

Official
Advanced
pinion05pinion05
3

brand-agency

Apply Agency neobrutalism branding to presentations, SVGs, documents, and web interfaces.

Community
Basic