CSS 텍스트 그림자, 소프트 리프트에서 네온까지

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text shadow generator</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #eef0f3; color: #1d2330; }
  .preview {
    display: grid; place-items: center; height: 130px; border-radius: 12px;
    background: #f7f7f2; font: 800 clamp(34px, 11vw, 64px)/1 system-ui, sans-serif; color: #1d2330;
  }
  .layer {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center;
    margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 13px;
  }
  .layer b { grid-column: 1 / -1; display: flex; justify-content: space-between; }
  .layer input[type=range] { width: 100%; }
  .layer button { border: 0; background: none; color: #9a3412; cursor: pointer; font-size: 13px; }
  .row { display: flex; gap: 8px; margin-top: 10px; }
  .row button { padding: 8px 12px; border: 0; border-radius: 8px; background: #1d2330; color: #fff; font-size: 14px; cursor: pointer; }
  output { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #1d2330; color: #d6f2df; font: 13px/1.5 ui-monospace, Consolas, monospace; word-break: break-word; }
</style>
</head>
<body>
<div class="preview" id="preview">Shadow</div>
<div id="layers"></div>
<div class="row">
  <button id="add" type="button">+ Add another shadow</button>
  <button id="copy" type="button">Select CSS</button>
</div>
<output id="css"></output>

<script>
  const layers = document.getElementById('layers');
  const preview = document.getElementById('preview');
  const out = document.getElementById('css');

  // One row of controls per shadow: x, y, blur, colour, opacity
  function addLayer(x, y, blur, color, alpha) {
    const div = document.createElement('div');
    div.className = 'layer';
    div.innerHTML = `
      <b>Shadow <button type="button" class="del">remove</button></b>
      x <input type="range" class="x" min="-20" max="20" value="${x}">
      y <input type="range" class="y" min="-20" max="20" value="${y}">
      blur <input type="range" class="blur" min="0" max="30" value="${blur}">
      colour <span><input type="color" class="color" value="${color}">
      <input type="range" class="alpha" min="0" max="100" value="${alpha}" style="width:55%"></span>`;
    div.querySelector('.del').addEventListener('click', () => { div.remove(); update(); });
    layers.append(div);
    update();
  }

  function rgba(hex, alpha) {
    const n = parseInt(hex.slice(1), 16);
    return `rgba(${n >> 16}, ${(n >> 8) & 255}, ${n & 255}, ${alpha / 100})`;
  }

  function update() {
    const parts = [...layers.children].map((l) => {
      const v = (c) => l.querySelector(c).value;
      return `${v('.x')}px ${v('.y')}px ${v('.blur')}px ${rgba(v('.color'), v('.alpha'))}`;
    });
    const value = parts.length ? parts.join(',\n             ') : 'none';
    preview.style.textShadow = value;  // first shadow in the list is painted on top
    out.textContent = `text-shadow: ${value};`;
  }

  layers.addEventListener('input', update);
  document.getElementById('add').addEventListener('click', () => addLayer(0, 0, 12, '#2563eb', 60));
  document.getElementById('copy').addEventListener('click', () => {
    getSelection().selectAllChildren(out);  // then Ctrl+C / Cmd+C
  });

  addLayer(2, 3, 4, '#000000', 30);
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text shadow effects</title>
<style>
  body { margin: 0; padding: 12px; font-family: system-ui, sans-serif; background: #eef0f3; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  .tile { border-radius: 12px; padding: 14px 12px 10px; text-align: center; }
  .tile p { margin: 0; font: 800 40px/1.1 system-ui, sans-serif; }
  .tile small { display: block; margin-top: 8px; font: 12px ui-monospace, Consolas, monospace; opacity: .75; }

  /* 1. Subtle lift: one small, soft, dark shadow */
  .lift { background: #fff; color: #1d2330; }
  .lift p { text-shadow: 0 2px 3px rgba(0, 0, 0, .25); }

  /* 2. Glow: zero offset, blur only, light colour on dark */
  .glow { background: #111827; color: #fff; }
  .glow p { text-shadow: 0 0 12px rgba(255, 255, 255, .8); }

  /* 3. Neon: white-ish text, a few coloured blurs of growing size */
  .neon { background: #0b0b16; color: #fff0fb; }
  .neon p { text-shadow: 0 0 4px #fff, 0 0 10px #ff2ec4, 0 0 22px #ff2ec4, 0 0 40px #b0128a; }

  /* 4a. Outline with 8 shadows, one per direction */
  .out-sh { background: #fde68a; color: #fff; }
  .out-sh p {
    text-shadow: -2px -2px 0 #1d2330, 0 -2px 0 #1d2330, 2px -2px 0 #1d2330, 2px 0 0 #1d2330,
                 2px 2px 0 #1d2330, 0 2px 0 #1d2330, -2px 2px 0 #1d2330, -2px 0 0 #1d2330;
  }
  /* 4b. Outline with text-stroke (prefixed, centred on the letter edge) */
  .out-st { background: #fde68a; color: #fff; }
  .out-st p { -webkit-text-stroke: 2px #1d2330; }

  /* 5. Letterpress: dark text, 1px light shadow below */
  .press { background: #6b7280; color: #374151; }
  .press p { text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }

  /* 6. Long shadow: many 1px steps, no blur (built in the script below) */
  .long { background: #2563eb; color: #fff; overflow: hidden; }

  /* 7. Blurred text: transparent colour, only the shadow is painted */
  .blurred { background: #fff; color: transparent; }
  .blurred p { text-shadow: 0 0 6px #1d2330; }
</style>
</head>
<body>
<div class="grid">
  <div class="tile lift"><p>Lift</p><small>0 2px 3px</small></div>
  <div class="tile glow"><p>Glow</p><small>0 0 12px white</small></div>
  <div class="tile neon"><p>Neon</p><small>4 coloured blurs</small></div>
  <div class="tile out-sh"><p>Outline</p><small>8 shadows</small></div>
  <div class="tile out-st"><p>Outline</p><small>-webkit-text-stroke</small></div>
  <div class="tile press"><p>Press</p><small>0 1px 0 light</small></div>
  <div class="tile long"><p id="long">Long</p><small>40 steps, built by JS</small></div>
  <div class="tile blurred"><p>Blurred</p><small style="color:#1d2330">color: transparent</small></div>
</div>

<script>
  // A long shadow is the same shadow repeated 1px further each time.
  const steps = [];
  for (let i = 1; i <= 40; i++) steps.push(`${i}px ${i}px 0 #1e40af`);
  document.getElementById('long').style.textShadow = steps.join(', ');
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Readable hero headline</title>
<style>
  body { margin: 0; padding: 12px; font-family: system-ui, sans-serif; background: #eef0f3; }
  .modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .modes button {
    padding: 8px 12px; border: 1px solid #c9ced6; border-radius: 99px;
    background: #fff; font-size: 14px; cursor: pointer;
  }
  .modes button[aria-pressed="true"] { background: #1d2330; border-color: #1d2330; color: #fff; }

  .hero {
    position: relative; display: grid; align-content: center; min-height: 380px; padding: 24px;
    border-radius: 14px; overflow: hidden; color: #fff;
    /* a busy, high-contrast background drawn with inline SVG */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23f5f1e6'/%3E%3Ccircle cx='30' cy='30' r='26' fill='%23ffd23f'/%3E%3Ccircle cx='90' cy='80' r='34' fill='%2338bdf8'/%3E%3Crect x='56' y='6' width='22' height='60' fill='%23ffffff'/%3E%3Cpath d='M0 110 L120 70' stroke='%23fb7185' stroke-width='10'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  }
  .hero::before {               /* the overlay, off until .overlay is set */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .15));
    opacity: 0; transition: opacity .2s;
  }
  .hero > * { position: relative; }  /* keep text above the overlay */
  .hero h1 { margin: 0 0 8px; font-size: clamp(30px, 8vw, 48px); line-height: 1.1; }
  .hero p { margin: 0; font-size: 18px; max-width: 30ch; }

  .hero.shadow h1, .hero.shadow p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 12px rgba(0, 0, 0, .6);
  }
  .hero.overlay::before { opacity: 1; }
</style>
</head>
<body>
<div class="modes" id="modes">
  <button type="button" data-mode="" aria-pressed="false">No shadow</button>
  <button type="button" data-mode="shadow" aria-pressed="true">text-shadow</button>
  <button type="button" data-mode="overlay" aria-pressed="false">Gradient overlay</button>
</div>
<section class="hero shadow" id="hero">
  <h1>Summer menu is here</h1>
  <p>Twelve new dishes, one long table, every Friday night.</p>
</section>

<script>
  const hero = document.getElementById('hero');
  document.getElementById('modes').addEventListener('click', (e) => {
    const btn = e.target.closest('button');
    if (!btn) return;
    hero.className = ('hero ' + btn.dataset.mode).trim();
    document.querySelectorAll('#modes button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
  });
</script>
</body>
</html>