CSS gradient image

CSS gradient image #

.image-1 {
	background-color: hsla(173, 77%, 83%, 1);
	background-image: radial-gradient(
			circle at 7% 81%,
			hsla(104.5588235294118, 91%, 91%, 1) 16%,
			transparent 53%
		),
		radial-gradient(circle at 11% 29%, hsla(213, 97%, 75%, 1) 8%, transparent 74%),
		radial-gradient(
			circle at 21% 14%,
			hsla(149, 93%, 64%, 1) 14.288924492243542%,
			transparent 68%
		),
		radial-gradient(circle at 90% 50%, hsla(118, 94%, 89%, 1) 2%, transparent 85%),
		radial-gradient(circle at 5% 1%, hsla(250, 76%, 61%, 1) 7%, transparent 84%);
	background-blend-mode: normal, normal, normal, normal, normal;
}
.image-2 {
	background-color: hsla(195, 82%, 85%, 1);
	background-image: radial-gradient(
			circle at 85% 15%,
			hsla(320, 95%, 89%, 1) 12%,
			transparent 60%
		),
		radial-gradient(circle at 95% 85%, hsla(180, 90%, 70%, 1) 10%, transparent 70%),
		radial-gradient(circle at 15% 25%, hsla(45, 95%, 85%, 1) 15%, transparent 65%),
		radial-gradient(circle at 10% 90%, hsla(280, 85%, 75%, 1) 5%, transparent 80%),
		radial-gradient(circle at 50% 50%, hsla(150, 90%, 80%, 1) 8%, transparent 75%);
	background-blend-mode: normal, normal, normal, normal, normal;
}
.image-3 {
	background-color: hsla(210, 75%, 92%, 1);  /* 부드러운 하늘색 베이스 */
	background-image:
	radial-gradient(
		circle at 20% 20%,
		hsla(340, 85%, 85%, 1) 18%,
		transparent 58%
	),
	radial-gradient(
		circle at 80% 80%,
		hsla(135, 90%, 80%, 1) 15%,
		transparent 65%
	),
	radial-gradient(
		circle at 75% 25%,
		hsla(55, 85%, 85%, 1) 12%,
		transparent 70%
	),
	radial-gradient(
		circle at 25% 75%,
		hsla(200, 95%, 75%, 1) 10%,
		transparent 75%
	),
	radial-gradient(
		circle at 50% 40%,
		hsla(290, 80%, 85%, 1) 8%,
		transparent 80%
	);
	background-blend-mode: normal, normal, normal, normal, normal;
}