background-clip（2025/8）

CSS

code

<span>NEWS</span>

<style>
span {
  background-image: url('https://go-ga-ku.com/wp-content/uploads/2025/08/bg_pattern.png'),
      radial-gradient(circle at left 0 bottom 262px, #f069ab 101px, transparent 102px),
      linear-gradient(#e65097, #e65097);
  background-size: 22px 22px, 204px 204px;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0;
  -webkit-background-clip: text;
}
, 0 0;
			-webkit-background-clip: text;
</style>

解説

background-clip: text; 背景画像をテキストの形にくり抜く

background-size: 22px 22px, 204px 204px, 100%, 100%; 画像サイズは22px四方、ラディアルグラデーションは204px四方、Linearグラデーションは全体に広げる（100％）

background-repeat: repeat, no-repeat, no-repeat: パターン画像は繰り返すが、ラジアルグラデーションとLinearグラデーションは繰り返さない

background-position: 0 0, 0 0, 0 0;

BACK