【コピペOK】CSSだけでネオン文字を作る方法｜ゲーム風・サイバー風デザインを作ろう！

ゲームのタイトル画面やサイバー風のWebサイトで見かける「光る文字」。

実は、画像を用意しなくてもCSSだけで作ることができます。

私が運営しているFANELABでも、ネオンカラーやゲーム風デザインを取り入れています。

今回は、CSSだけでネオン文字を作る方法を、コピペできるサンプル付きで紹介します。

ネオン文字は「text-shadow」で作れる

CSSでネオン文字を作る基本は、text-shadowです。

通常の影とは違い、複数の影を重ねることで光っているような表現ができます。

まずはHTMLを用意します。

<h1 class="neon">FANELAB</h1>

続いてCSSです。

body{
    background:#0b1120;
}

.neon{
    color:#8CFBFF;
    font-size:64px;
    font-weight:bold;

    text-shadow:
        0 0 5px #00EAFF,
        0 0 10px #00EAFF,
        0 0 20px #00EAFF,
        0 0 40px #00EAFF,
        0 0 80px #00EAFF;
}

これだけで文字が発光しているようなネオン表現になります。

なぜ光って見えるの？

text-shadowは何度でも指定できます。

例えば

text-shadow:
0 0 5px cyan,
0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;

このように書くと、

• 小さい光
• 少し大きい光
• さらに大きい光

が何層にも重なり、ネオンのようなぼんやりした光になります。

影ではなく「光の層」を作っているイメージです。

サイバー風にするなら複数色がおすすめ

ゲーム風・近未来風のデザインでは、水色だけではなく紫やピンクも組み合わせると一気にサイバー感が増します。

.neon{

    color:#EFFFFF;

    text-shadow:
        0 0 4px #00EAFF,
        0 0 8px #00EAFF,
        0 0 16px #00EAFF,
        0 0 30px #8B5CF6,
        0 0 60px #FF00FF;

}

ブルー・パープル・ピンクは相性がよく、ゲームやAI系サイトでもよく使われる配色です。

グラデーションを組み合わせる

さらに文字自体をグラデーションにすると、より近未来らしいデザインになります。

.neon{

    background:linear-gradient(
        90deg,
        #00D9FF,
        #8B5CF6,
        #FF4DE3
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

背景を文字で切り抜くことで、画像を使わずにグラデーション文字を作ることができます。

ネオンを点滅させる

ネオン看板のように少し光を変化させたい場合は、アニメーションを追加します。

.neon{
    animation:glow 1.5s infinite alternate;
}

@keyframes glow{

    from{

        text-shadow:
        0 0 5px #00EAFF,
        0 0 10px #00EAFF,
        0 0 20px #00EAFF;

    }

    to{

        text-shadow:
        0 0 10px #00EAFF,
        0 0 20px #00EAFF,
        0 0 40px #00EAFF,
        0 0 80px #00EAFF;

    }

}

ほんの少し光が強弱するだけでも、静止した文字より存在感が生まれます。

背景を暗くするとネオンが映える

ネオン文字は背景も重要です。

おすすめは、

body{

    background:#0B1120;

}

のようなダークネイビーやブラック系です。

明るい背景では発光が目立ちにくいため、暗い背景を使うことでネオンの魅力を最大限に引き出せます。

FANELABでも取り入れているデザイン

FANELABでは、このようなネオン表現をベースにデザインしています。

特に意識したポイントは次のとおりです。

• DotGothic16でゲームらしさを演出
• シアン・パープル・ピンクを中心に配色
• 暗い背景でネオンカラーを目立たせる
• ボタンにも発光エフェクトを追加
• サイト全体の世界観を統一する

ネオン文字だけではなく、ボタンやカードにも同じ配色を使うことで、サイト全体に統一感が生まれます。

text-shadowだけでも十分かっこいい

「ネオン文字＝難しそう」というイメージがあるかもしれません。

しかし、実際はtext-shadowを数行書くだけで、かなり本格的なネオンデザインを作ることができます。

そこへグラデーションやアニメーションを少し加えるだけで、ゲーム風やサイバー風のデザインに仕上げられます。

まとめ

CSSだけでもネオン文字は簡単に作ることができます。

基本はtext-shadowを重ねるだけなので、特別なライブラリや画像は必要ありません。

ゲーム風やサイバー風のWebサイトを作りたい方は、

• text-shadow
• linear-gradient
• background-clip
• @keyframes

この4つを組み合わせるだけでも、印象的なデザインになります。

ぜひ自分だけのネオンデザインを作ってみてください。

サイバー風Webデザインシリーズ

FANELAB（このブログ）で取り入れたデザインの工夫

サイバー風Webデザインの作り方｜FANELABで取り入れたデザインの工夫を紹介

FANELABで採用しているサイバー風デザインの作り方を紹介します。ネオンカラーやDotGothic16フォントなど、ゲーム風・近未来風デザインを制作するポイントを実例付きで解説します。

FANELAB

サイバーパンク風タイトルを作るテクニック

CSSでサイバーパンク風タイトルを作るテクニック【ゲーム風デザインを再現】

CSSでサイバーパンク風タイトルを作る方法を解説します。ネオンカラーやグラデーション、フォント選び、文字装飾など、ゲーム風・近未来風デザインを作るテクニックを紹介します。

FANELAB

コピペOK、CSSだけでガラス風UIを作る方法

【コピペOK】CSSでガラス風UI（Glassmorphism）を作る方法

CSSだけでガラス風UI（Glassmorphism）を作る方法を解説します。backdrop-filterを使った透明感のあるデザインや、ぼかし・枠線・影の付け方をコピペOKのサンプル付きで紹介します。

FANELAB

カラーコード付き、サイバーデザインおすすめの配色👇

【カラーコード付き】サイバー風デザインにおすすめの配色4選

サイバー風デザインにおすすめの配色を5パターン紹介します。カラーコード付きなので、ゲーム風・AI・近未来デザインのWebサイト制作にそのまま活用できます。

FANELAB

DotGothic16の使い方👇

DotGothic16の使い方｜ゲーム風デザインにおすすめのGoogle Fonts

DotGothic16の使い方を解説します。Google Fontsで無料利用できるゲーム風・レトロ・サイバー風デザインにおすすめのフォントです。導入方法やCSSの設定、デザインのコツも紹介します。

FANELAB