# CSS Frosted + Saturated Borders

> CSS technique for dynamic, semi-transparent borders using background-clip and backdrop-filter

This technique combines background-clip and backdrop-filter to create borders that frost and saturate background colors passing behind an element. It replaces rigid solid borders with a softer glassmorphic edge that picks up underlying content shadows and colors.

## How it works

Technique by @jh3yy: frosted + saturated borders using background-clip + backdrop-filter. Video demos a card ('Add to cart', price €17,95 with €3,95 struck through) whose border frosts and saturates whatever colors scroll beneath it.

Key ideas from the thread:

- Use background-clip + backdrop-filter to create a frosted, saturated border that lets color/shadows through.

- Adding some opacity on the border lets color/shadows through — solid borders can feel a little "harsh"; it can be subtle.

- Alternative implementations: "border + background-clip" (used in the demo), or "outline", layered backgrounds, or a pseudo-element underlay with negative inset if you want gradients.

- jhey often prefers the pseudo-element route so a subtle gradient doesn't disrupt layout; choice depends on scenario and constraints.

CodePen (adjustable saturation, blur, etc.): https://codepen.io/jh3y/pen/jEWRjQL

Related post referenced: https://x.com/steveschoger/status/1695139153753604384

## What it is for

- Style card borders that blend subtly into colorful or shifting backgrounds
- Create dynamic glassmorphic UI elements without heavy graphics
- Soften harsh component outlines using semi-transparent, color-reactive borders

## Key points

- Uses background-clip paired with backdrop-filter to isolate filter effects to the border area
- Enhances underlying background tones using saturation and blur adjustments
- Alternative implementation using pseudo-elements with negative insets for gradient borders without layout shift
- Can be adapted using border, outline, or layered background approaches depending on design constraints

## Pricing

Free

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Platforms: Web
- For: Front-end developers and UI designers
- Tags: css, web design, backdrop filter, glassmorphism, ui

## Why it was saved

- [@jh3yy, 4 November 2025](https://x.com/jh3yy/status/1985792728312012896): Reusable trick for softer, more interesting borders than solid ones

## Related

- [Liquid Glass](https://xiry.app/resources/liquid-glass): React component library for Apple-style liquid glass and blur effects. (Website, Open source)
- [Fancy-Border-Radius](https://xiry.app/resources/fancy-border-radius): Visual generator for creating organic blob shapes using CSS border-radius (Web app, Free)
- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)
- [Dynamic Theming with CSS light-dark() and color-scheme](https://xiry.app/resources/dynamic-theming-with-css-light-dark-and-color-scheme): CSS pattern for switching colors across themes without duplicate selectors (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/css-frosted-saturated-borders

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.