html图片模糊效果渐变,使用CSS3渐变构造的模糊背景特效

CSS

语言：

CSSSCSS

确定

body{margin: 0;}

.page-head--masthead {

background-image: radial-gradient(ellipse 25% 50% at 6.25% 12.5%, #9ea0a3, rgba(158, 160, 163, 0)), radial-gradient(ellipse 25% 50% at 18.75% 12.5%, #9c9a97, rgba(156, 154, 151, 0)), radial-gradient(ellipse 25% 50% at 31.25% 12.5%, #362f29, rgba(54, 47, 41, 0)), radial-gradient(ellipse 25% 50% at 43.75% 12.5%, #15100d, rgba(21, 16, 13, 0)), radial-gradient(ellipse 25% 50% at 56.25% 12.5%, #271e17, rgba(39, 30, 23, 0)), radial-gradient(ellipse 25% 50% at 68.75% 12.5%, #241c17, rgba(36, 28, 23, 0)), radial-gradient(ellipse 25% 50% at 81.25% 12.5%, #040201, rgba(4, 2, 1, 0)), radial-gradient(ellipse 25% 50% at 93.75% 12.5%, #1c1c1c, rgba(28, 28, 28, 0)), radial-gradient(ellipse 25% 50% at 6.25% 37.5%, #a9abac, rgba(169, 171, 172, 0)), radial-gradient(ellipse 25% 50% at 18.75% 37.5%, #999999, rgba(153, 153, 153, 0)), radial-gradient(ellipse 25% 50% at 31.25% 37.5%, #190e03, rgba(25, 14, 3, 0)), radial-gradient(ellipse 25% 50% at 43.75% 37.5%, black, transparent), radial-gradient(ellipse 25% 50% at 56.25% 37.5%, #6a4d44, rgba(106, 77, 68, 0)), radial-gradient(ellipse 25% 50% at 68.75% 37.5%, #533c37, rgba(83, 60, 55, 0)), radial-gradient(ellipse 25% 50% at 81.25% 37.5%, black, transparent), radial-gradient(ellipse 25% 50% at 93.75% 37.5%, #141111, rgba(20, 17, 17, 0)), radial-gradient(ellipse 25% 50% at 6.25% 62.5%, #ac9479, rgba(172, 148, 121, 0)), radial-gradient(ellipse 25% 50% at 18.75% 62.5%, #746454, rgba(116, 100, 84, 0)), radial-gradient(ellipse 25% 50% at 31.25% 62.5%, #0a0300, rgba(10, 3, 0, 0)), radial-gradient(ellipse 25% 50% at 43.75% 62.5%, #3b3134, rgba(59, 49, 52, 0)), radial-gradient(ellipse 25% 50% at 56.25% 62.5%, #715a60, rgba(113, 90, 96, 0)), radial-gradient(ellipse 25% 50% at 68.75% 62.5%, #5c453e, rgba(92, 69, 62, 0)), radial-gradient(ellipse 25% 50% at 81.25% 62.5%, #15100c, rgba(21, 16, 12, 0)), radial-gradient(ellipse 25% 50% at 93.75% 62.5%, #0d0d0d, rgba(13, 13, 13, 0)), radial-gradient(ellipse 25% 50% at 6.25% 87.5%, #a37a52, rgba(163, 122, 82, 0)), radial-gradient(ellipse 25% 50% at 18.75% 87.5%, #49301a, rgba(73, 48, 26, 0)), radial-gradient(ellipse 25% 50% at 31.25% 87.5%, #0d0d0d, rgba(13, 13, 13, 0)), radial-gradient(ellipse 25% 50% at 43.75% 87.5%, #493b3a, rgba(73, 59, 58, 0)), radial-gradient(ellipse 25% 50% at 56.25% 87.5%, #584d51, rgba(88, 77, 81, 0)), radial-gradient(ellipse 25% 50% at 68.75% 87.5%, #624638, rgba(98, 70, 56, 0)), radial-gradient(ellipse 25% 50% at 81.25% 87.5%, #1a0c06, rgba(26, 12, 6, 0)), radial-gradient(ellipse 25% 50% at 93.75% 87.5%, #2a2a2c, rgba(42, 42, 44, 0));

height: 100vh;

}