Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
background-clip

8 Articles
{
,

}
Direct link to the article Making Static Noise From a Weird CSS Gradient Bug
background-clip conic gradients gradients mix-blend-mode radial-gradient

Making Static Noise From a Weird CSS Gradient Bug

What I will be doing here is kind of an experiment to explore tricks that leverage a bug with the way CSS gradients handle sub-pixel rendering to create a static noise effect — like you might see on a TV with no signal.
Temani Afif on Nov 18, 2022
Direct link to the article Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
3d background-clip hover mask-clip

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn’t use …

Temani Afif on May 26, 2022
Direct link to the article Icon Glassmorphism Effect in CSS
backdrop-filter background-clip element() emoji filter hsl mask-clip navigation

Icon Glassmorphism Effect in CSS

I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time …

Ana Tudor on Nov 8, 2021
Direct link to the article CSS-ing Candy Ghost Buttons
background-clip border-image buttons clip-path ghost buttons gradients mask mask-clip mask-composite mix-blend-mode

CSS-ing Candy Ghost Buttons

Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and …

Ana Tudor on Oct 31, 2021
Direct link to the article Nested Gradients with background-clip
background-clip buttons gradients multiple backgrounds

Nested Gradients with background-clip

I can’t say I use background-clip all that often. I’d wager it’s hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to …

Chris Coyier on Aug 29, 2019
Direct link to the article Multiple Background Clip
background background-clip multiple backgrounds

Multiple Background Clip

You know how you can have multiple backgrounds?

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
}

That’s just background-image. You can set their position too, as you might expect. We’ll shorthand it:

body {
  background: 
    url(image-one.jpg) no-repeat top right,
    url(image-two.jpg) 
…
Chris Coyier on Jan 30, 2019
Direct link to the article The `background-clip` Property and its Use Cases
background-clip

The `background-clip` Property and its Use Cases

background-clip is one of those properties I’ve known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection …

Ana Tudor on Feb 5, 2016
Direct link to the article background-clip
background-clip

background-clip

background-clip lets you control how far a background image or color extends beyond an element’s padding or content.

.frame {
  background-clip: padding-box;
}
Values
  • border-box is the default value. This allows the background to extend all the way to the
…
Chris Coyier on May 20, 2021

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top