[Accumulated water into a deep] CSS frosted glass effect and gradient theme color text

 Hello everyone, I am the blogger of csdn: lqj_ myself

lqj_I_Python artificial intelligence vision (opencv) from entry to actual combat, front end, WeChat applet - CSDN Blog

The latest uniapp graduation design column is also placed below:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

Usually, I will also explain some things that you usually use in the Bilibili video,

Welcome to Bilibili:

Lu Miaoer's personal space-Lu Miaoer's personal homepage-哔哩哔哩Video

Table of contents

How to do it?

HTML

CSS

js

---

The frosted glass effect has been popular on the Internet for many years, Mac OS is famous for its frosted glass effect, Windows 10 also achieves the frosted glass effect with some other lighting, depth, motion, material, scale.

When it comes to using a frosted glass effect in CSS, some of us know how to do it, while others still google it:

How to do it?

"css glossy effect"
"css frosted glass"
"transparent blur background css"
"frosted glass effect photoshop"
"css blur background only" "
css glass pane"
"css background filter"
"css blur overlay"
"css blur behind div background"

Today, I’m going to show a CSS-only method that you can use to make a frosted glass effect in CSS. 

HTML

<div class="card">
  <h2 class="gradient">
    <哔哩哔哩：卢淼儿/>
  </h2>
  <div>
    <p>.welcome{</p>
    <p class="indent">"CSDN:lqj_本人"</p>
    <p class="indent">"哔哩哔哩：卢淼儿"</p>
    <p>}</p>
  </div>
  <a href="#" class="gradient">欢迎三连</a>
</div>

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100vw;
	min-height: 100vh;
	background: url(https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800) no-repeat;
	background-size: cover;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 300px;
	height: 400px;
	box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	background: rgba(255, 255, 255, .9);

	//   background: rgba(255, 255, 255, .3);
	//   backdrop-filter: blur(20px) brightness(150%);
	@supports (backdrop-filter: blur(20px) brightness(150%)) {
		background: rgba(255, 255, 255, .3);
		backdrop-filter: blur(20px) brightness(150%);
	}

	h2 {
		font-size: 1.8em;
		color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	}

	p {
		font-size: 1em;
		color: #1b263b;
		font-weight: 300;

		&.indent {
			text-indent: 1em;
		}
	}

	a {
		padding: 15px 50px;
		border-radius: 30px;
		color: white;
		text-decoration: none;
		font-weight: 500;
		// background-image: linear-gradient(
		//     45deg,
		//     hsl(220deg 67.24% 60%),
		//     hsl(333.91deg 50% 60%)
		// );
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transition: filter .5s;

		&:hover {
			filter: brightness(120%);
		}
	}
}

js

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    let d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }

    h /= 6;
  }

  return [h * 360, s * 100, l * 100];
}
const gradientBtn = () => {
	const img = new Image();
	img.addEventListener('load', function() {
		const colorThief = new ColorThief();
		let palette = colorThief.getPalette(img, 3);
		palette.forEach((item, index) => {
			palette[index] = rgbToHsl(...item);
		})
		// document.getElementById('button').style.backgroundImage = `linear-gradient(
        //     45deg,
        //     hsl(${palette[1][0]}deg 60% 60%),
        //     hsl(${palette[2][0]}deg 60% 60%)
        // )`;
        document.querySelectorAll('.gradient').forEach(el => el.style.backgroundImage = `linear-gradient(
            45deg,
            hsl(${palette[1][0]}deg 60% 60%),
            hsl(${palette[2][0]}deg 60% 60%)
        )`);
        // document.getElementById('button').style.backgroundImage = `linear-gradient(
        //     45deg,
        //     hsl(${palette[1][0]}deg ${palette[1][1]}% ${palette[1][2]}%),
        //     hsl(${palette[2][0]}deg ${palette[2][1]}% ${palette[2][2]}%)
        // )`;
		// document.getElementById('button').style.backgroundImage = `linear-gradient(
        //     45deg,
        //     rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]}),
        //     rgb(${palette[2][0]}, ${palette[2][1]}, ${palette[2][2]})
        // )`;
	});
	img.crossOrigin = 'anonymous';
	img.src = 'https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800 no-repeat';
}

gradientBtn();