ビジュアル

CSSだけで作る、光り方がかっこいいネオンの効果

投稿日 2026/02/28

更新日 2026/2/26

シンプルなカードでも、光り方ひとつで世界観はガラッと変わります。

このサンプルは、枠線のグラデーションに加えて、カード外側のネオンと内側の光だまりをレイヤーで重ね、サイバーテイストの存在感を作っています。画像サムネ＋タイトルの構成なので、そのまま記事リンクや作品一覧にも使いやすいデザインです。

Preview プレビュー

Code コード

HTML

<div class="kumonosu-container">
	<section class="kumonosu-section-popular">
		<div class="kumonosu-card-grid">
			<article class="kumonosu-card">
				<a href="#" class="kumonosu-card-link">
					<div class="kumonosu-card-media">
						<div class="kumonosu-card-image">
							<img width="1120" height="630" src="https://kumonosu.net/wp-content/uploads/2026/02/neon26.jpg.webp" alt="Cyberpunk City Neon">
						</div>
					</div>
					<div class="kumonosu-card-body">
						<h3 class="kumonosu-card-title">NEON CYBER INTERFACE</h3>
					</div>
					<span class="kumonosu-glow"></span>
				</a>
			</article>
		</div>
	</section>
</div>

CSS

:root {
	--main: #000;
	--sub: #fff;
	--accent: #0049a7;
	--accent2: #de00ff;
}
body {
	background: var(--main);
	color: color-mix(in srgb, var(--main) 15%, var(--sub));
	font-family: Noto Sans JP Local, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	font-feature-settings: "palt" 1;
	font-size: 15px;
	letter-spacing: 1.7px;
	line-height: 2;
	margin: 0;
	padding: 0;
}
.kumonosu-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
}
.kumonosu-section-popular {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px;
	position: relative;
}
.kumonosu-card-grid {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
}
.kumonosu-card {
	position: relative;
	max-width: 500px;
	width: 100%;
	border-radius: 16px;
	border: 1px solid transparent;
	box-shadow: 0 0 40px color-mix(in srgb, var(--accent2) 15%, transparent);
	--angle: 315deg;
	background:
		linear-gradient(var(--main), var(--main)) padding-box,
		linear-gradient(var(--angle),
			color-mix(in srgb, var(--main) 66%, var(--sub)) 0%,
			var(--main) 18%,
			var(--main) 50%,
			color-mix(in srgb, var(--main) 92.5%, var(--sub)) 85%,
			var(--sub) 100%) border-box;
}
.kumonosu-card::before {
	content: "";
	position: absolute;
	inset: -50px;
	z-index: -1;
	pointer-events: none;
	padding: 50px;
	background-color: var(--sub);
	background-clip: content-box;
	border-radius: 63px;
	filter: drop-shadow(0 0 6px var(--sub)) drop-shadow(0 0 17px var(--accent2));
	--mask-angle-red: 151deg;
	-webkit-mask-image: linear-gradient(var(--mask-angle-red), var(--main) 16% 15%, transparent 26%);
	mask-image: linear-gradient(var(--mask-angle-red), var(--main) 16% 15%, transparent 26%);
}
.kumonosu-card-link {
	display: flex;
	flex-direction: column;
	padding: 25px;
	position: relative;
	z-index: 1;
	gap: 20px;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: 16px;
}
.kumonosu-card-link::before {
	content: "";
	position: absolute;
	width: 200px;
	height: 200px;
	top: -100px;
	left: -100px;
	filter: blur(20px);
	background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 60%, var(--sub)) 10%, color-mix(in srgb, var(--main) 57%, var(--accent2)) 30%, color-mix(in srgb, var(--main) 97%, var(--accent2)) 100%);
	z-index: -1;
}
.kumonosu-card-link::after {
	content: "";
	position: absolute;
	width: 100px;
	height: 130px;
	right: -80px;
	top: 50%;
	transform: translateY(-50%);
	filter: blur(50px);
	z-index: -1;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, var(--sub)) 10%, color-mix(in srgb, var(--main) 57%, var(--accent)) 30%, color-mix(in srgb, var(--main) 97%, var(--accent)) 100%);
}
.kumonosu-glow {
	position: absolute;
	background: radial-gradient(circle, color-mix(in srgb, var(--main) 20%, var(--accent)) 60%);
	width: 100%;
	height: 300px;
	left: 50%;
	transform: translateX(-50%);
	bottom: -300px;
	filter: blur(30px);
	border-radius: 50%;
	z-index: -1;
}
.kumonosu-card-image {
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 16 / 9;
}
.kumonosu-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kumonosu-card-title {
	font-size: 15px;
	line-height: 1.5;
	margin: 10px 0;
}