# Linguaggio visivo del gambling / casino / betting online

Guida pratica per replicare l'estetica "hyper-gambling" (slot machine, casino online, betting) su web e app. Riferimenti reali e attuali (2023-2026). Ogni sezione include indicazioni concrete direttamente utilizzabili da uno sviluppatore.

L'obiettivo estetico e' quello di trasmettere **eccitazione, urgenza, lusso e ricompensa immediata**: sfondi scuri, colori neon saturi, oro e metallo, luci lampeggianti, cifre giganti che salgono, effetti di vincita continui.

---

## 1. Palette colori

Il pattern dominante e' **sfondo scuro + accenti saturi ad alto contrasto**. Il buio fa risaltare i neon, l'oro e i bagliori (il glow neon e' visibile SOLO su fondo scuro).

### 1.1 Le combinazioni ricorrenti

| Palette | Colori | Uso / significato |
|---|---|---|
| **Classic Luxury** | Nero, Oro, Argento | Casino high-end, esclusivita', ricchezza |
| **Vibrant / Energetic** | Rosso acceso, Giallo, Verde neon | Aree slot, eccitazione, pubblico giovane |
| **Royal Elegance** | Viola profondo, Oro, Bianco | Lusso, regalita', tavoli VIP |
| **Neon Nightlife** | Neon blue, Hot pink, Electric yellow | Energia notturna, vibe "arcade" |
| **Casino Table** | Verde feltro, Rosso, Oro | Richiamo diretto ai tavoli (roulette, blackjack) |
| **Crypto Dark** | Blu notte / Viola, accenti neon green | Stile Stake / Roobet (vedi sez. 6) |

### 1.2 Palette pronte all'uso (hex)

Gli articoli di branding elencano combinazioni ma raramente danno hex. Ecco valori concreti coerenti con lo stile, pronti da incollare come CSS custom properties:

```css
:root {
  /* --- Base scura (sfondi) --- */
  --bg-900: #0a0a12;      /* quasi nero, blu-viola */
  --bg-800: #12121f;
  --bg-700: #1b1b2e;      /* pannelli / card */
  --bg-purple: #1a0b2e;   /* variante viola profondo (Roobet-like) */

  /* --- Oro / metallo --- */
  --gold-500: #ffd700;    /* oro puro */
  --gold-600: #f5c518;
  --gold-700: #d4af37;    /* oro antico */
  --gold-glow: #ffdf6b;

  /* --- Neon --- */
  --neon-green: #39ff14;  /* verde neon "vincita" */
  --neon-cyan:  #00fff0;
  --neon-pink:  #ff2e97;  /* hot pink */
  --neon-magenta: #ff00e5;
  --neon-blue:  #2d6bff;
  --neon-purple: #b026ff;

  /* --- Rosso / verde casino --- */
  --casino-red:   #e21b3c; /* roulette red, urgenza */
  --casino-green: #0f7b3f; /* feltro tavolo */
  --casino-green-felt: #1c7a4d;

  /* --- Testo --- */
  --text: #f5f5fa;
  --text-dim: #9aa0b5;
}
```

### 1.3 Gradienti caratteristici

I gradienti sono ovunque: bottoni, jackpot, badge, sfondi. Tre famiglie:

```css
/* Oro metallico (bottoni "PLAY", jackpot) */
--grad-gold: linear-gradient(180deg, #fff3b0 0%, #ffd700 40%, #d4af37 60%, #a67c00 100%);

/* Neon bicolore (CTA arcade, banner) */
--grad-neon: linear-gradient(135deg, #ff2e97 0%, #b026ff 50%, #2d6bff 100%);

/* Viola profondo (sfondo hero) */
--grad-purple-bg: radial-gradient(circle at 50% 0%, #3a1a5e 0%, #1a0b2e 60%, #0a0a12 100%);

/* Verde vincita */
--grad-win: linear-gradient(180deg, #7dff5a, #39ff14, #0f9b2e);
```

Il gradiente radiale posizionato in alto (`radial-gradient(circle at 50% 0%, ...)`) crea il tipico effetto "riflettore/palcoscenico" dietro l'hero o le slot.

### 1.4 Psicologia del colore (perche' funziona)

- **Rosso** = urgenza, eccitazione, fortuna. Usato per CTA, timer, "HOT".
- **Verde** = fortuna, denaro, vincita, feltro del tavolo. Usato per importi vinti, "WIN", saldo positivo.
- **Oro** = ricchezza, premio, esclusivita'. Jackpot, VIP, monete.
- **Viola/Blu profondo** = lusso, mistero, fiducia. Sfondi premium (Roobet, Stake).
- **Neon** = energia, notte, dopamina. Bordi, glow, accenti.

---

## 2. Tipografia

Lo stile richiede caratteri **grassi, condensati, ad alto impatto** per i titoli, e font **display / LED** per i numeri (jackpot, saldo, timer). Tutti i font sotto sono gratuiti.

### 2.1 Display / Headline (grassi e condensati) — Google Fonts

| Font | Caratteristiche | Uso |
|---|---|---|
| **Anton** | Sans grottesco, condensato, ultra-bold, peso unico | Titoli dominanti, "JACKPOT", banner |
| **Bebas Neue** | Condensato alto, elegante, molto diffuso | Headline, etichette, tab |
| **Oswald** | Stretto, 6 pesi (ExtraLight→Bold) | Testi UI densi, header editoriali |
| **Archivo Black** | Sans nero, largo e pesante | CTA, badge |
| **Teko** | Condensato tecnico, moderno | Numeri, contatori, punteggi |
| **Fjalla One** | Display medio-bold | Titoli secondari |
| **Titan One / Luckiest Guy / Bungee** | Chunky, arcade, cartoon | Vibe "juicy"/arcade, premi |

`Bungee` (di David Jonathan Ross, Google Fonts) e' particolarmente adatta all'estetica insegna/marquee urbana.

### 2.2 Numeri LED / 7-segment (jackpot, saldo, timer)

Per i contatori digitali serve un font 7/14-segmenti che imiti i display LED reali:

- **DSEG** (keshikan.net) — famiglia free open source, imita display a 7 e 14 segmenti, con varianti Classic/Modern, weight e italic. E' lo standard de facto. Include `DSEG7` (7 segmenti) e `DSEG14`.
- **Segment7** (Font Library, open source) — monospace, solo 7 segmenti, look calcolatrice/LED autentico.
- **Seven Segment** (FontGet / CDNFonts) — alternativa, free per uso personale.

In alternativa, per un look "digitale" ma leggibile, va bene una monospace tech: **Share Tech Mono**, **Orbitron** (futuristica, ottima per sci-fi/arcade) o **DotGothic16** (dot-matrix), tutte su Google Fonts.

### 2.3 Abbinamenti consigliati

- **Anton** (titoli) + **Inter/Roboto** (corpo) + **DSEG7** (numeri jackpot).
- **Bebas Neue** (headline) + **Oswald** (UI) + **Orbitron** (contatori).

---

## 3. Motivi UI ricorrenti

Elementi grafici che definiscono immediatamente il genere:

- **Reel della slot** — 3-5 colonne verticali che scorrono con simboli (7, campanelle, frutti, diamanti, monete). Effetto blur in movimento + decelerazione elastica allo stop.
- **Ruota della fortuna (wheel of fortune)** — cerchio a spicchi colorati alternati, indicatore/lancetta in alto, decelerazione con `cubic-bezier` per il "quasi-vinci".
- **Monete e gettoni (chips)** — monete dorate 3D (spesso animate/rotanti), fiches da poker colorate.
- **Jackpot counter / ticker** — cifre grandi LED che salgono di continuo (count-up animato), spesso con ticker scorrevole ("$1,204,556" incrementale).
- **Luci da marquee (chase lights)** — cornici di lampadine che si accendono in sequenza attorno a banner/insegne.
- **Confetti, scintille, particelle** — esplosione di coriandoli e monete al momento della vincita.
- **Badge / medaglie / corone** — livelli VIP, loyalty, "BONUS", "FREE SPINS".
- **Banner promozionali + jackpot ticker scorrevole** — tile dei giochi live con jackpot in tempo reale, barra loyalty visibile.
- **Simboli portafortuna** — 777, ferri di cavallo, quadrifogli, diamanti, stelle.

---

## 4. Illuminazione ed effetti

Il "peso visivo" arriva dagli effetti luce/materiale:

- **Neon glow** — bagliore colorato attorno a testo e bordi (layer multipli di shadow). Vedi sez. 5.1.
- **Drop shadow profonde** — le card "galleggiano" su fondo scuro.
- **Chrome / metallico** — gradienti oro/argento con highlight speculari e bordo scuro per dare volume.
- **Shine sweep (riflesso che passa)** — striscia di luce diagonale che attraversa bottoni/carte periodicamente.
- **Inner glow / tubo neon** — inset shadow chiaro per l'effetto "tubo al neon acceso".
- **Bevel / emboss** — bordi smussati su monete e bottoni per il 3D.
- **Pulsazione / flicker** — glow che pulsa o lampeggia come insegna al neon.

> Nota performance/accessibilita': blur grandi e animazioni infinite di `box-shadow` sono costosi da ridipingere. Animare con parsimonia e avvolgere gli effetti pulsanti in `@media (prefers-reduced-motion: reduce)`.

---

## 5. Tecniche CSS concrete

### 5.1 Testo neon (text-shadow a layer)

Layer multipli dello stesso colore con blur crescente = alone luminoso (tecnica CSS-Tricks):

```css
.neon-text {
  color: #fff;
  text-shadow:
    0 0 7px  #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px  #39ff14,
    0 0 82px  #39ff14,
    0 0 92px  #39ff14,
    0 0 102px #39ff14,
    0 0 151px #39ff14;
}

/* Flicker da insegna al neon */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
      0 0 40px #39ff14, 0 0 80px #39ff14, 0 0 90px #39ff14,
      0 0 100px #39ff14, 0 0 150px #39ff14;
  }
  20%, 24%, 55% { text-shadow: none; }
}
.neon-text--flicker { animation: flicker 1.5s infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .neon-text--flicker { animation: none; }
}
```

### 5.2 Bordo/box neon glow (bottone, card)

```css
.neon-box {
  border: 2px solid var(--neon-pink);
  border-radius: 12px;
  box-shadow:
    0 0 5px  var(--neon-pink),
    0 0 15px var(--neon-pink),
    0 0 30px var(--neon-pink),
    inset 0 0 8px rgba(255, 46, 151, .6); /* inner glow "tubo" */
}
```

### 5.3 Bottone oro metallico (CTA "PLAY / SPIN")

```css
.btn-gold {
  background: linear-gradient(180deg, #fff3b0 0%, #ffd700 40%, #d4af37 60%, #a67c00 100%);
  color: #3a2a00;
  font-family: "Anton", sans-serif;
  letter-spacing: .05em;
  border: 2px solid #a67c00;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),   /* highlight superiore */
    inset 0 -3px 4px rgba(0,0,0,.35),        /* ombra inferiore = volume */
    0 6px 0 #7a5c00,                          /* "spessore" 3D */
    0 10px 20px rgba(0,0,0,.5),               /* ombra a terra */
    0 0 24px rgba(255,215,0,.6);              /* glow oro */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:active { transform: translateY(4px); box-shadow: /* riduci il 0 6px 0 ... */ ; }
```

### 5.4 Bordo a gradiente (gradient border)

Due tecniche affidabili:

```css
/* A) border-image */
.grad-border {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #ff2e97, #b026ff, #2d6bff) 1;
}

/* B) doppio background (permette border-radius, la A no) */
.grad-border-radius {
  border: 3px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(var(--bg-800), var(--bg-800)) padding-box,
    linear-gradient(135deg, #ff2e97, #b026ff, #2d6bff) border-box;
}
```

### 5.5 Shine sweep (riflesso animato su bottone/card)

```css
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute; top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg,
    transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: sweep 3s infinite;
}
@keyframes sweep { 0% { left: -150%; } 60%,100% { left: 150%; } }
```

### 5.6 Testo con riempimento a gradiente (oro/neon)

```css
.grad-text {
  background: linear-gradient(180deg, #fff3b0, #ffd700, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

### 5.7 Luci da marquee (cornice di lampadine)

Con `box-shadow` multipli su uno pseudo-elemento, o piu' semplicemente con un `repeating-radial-gradient` + animazione di opacita' per l'effetto "chase". Per il chase preciso conviene JS o `background-position` animato di un pattern di puntini.

```css
.marquee-lights {
  padding: 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle, #ffdf6b 2px, transparent 3px) 0 0 / 20px 20px;
  animation: chase .6s steps(2) infinite;
}
@keyframes chase { to { background-position: 20px 0; } }
```

### 5.8 Slot reel (scorrimento verticale)

Il pattern base: una colonna piu' alta del viewport, si trasla verso l'alto con `transform: translateY()` e si ferma con easing elastico. Approcci reali su CodePen (sez. 6): pure CSS con `@keyframes`, JS con `requestAnimationFrame` + decelerazione, o 3D con `rotateX`/`translateZ` per il reel cilindrico.

```css
.reel { height: 120px; overflow: hidden; }
.reel__strip { display: flex; flex-direction: column;
  transition: transform 3s cubic-bezier(.15,.9,.25,1); } /* decelerazione */
.reel--spinning .reel__strip { filter: blur(2px); }      /* motion blur */
```

### 5.9 Count-up del jackpot

Il conteggio incrementale si fa in JS (aggiornando `textContent`), abbinato al font DSEG7 e a un container con glow verde/oro. Per performance usare `requestAnimationFrame` e `Intl.NumberFormat` per i separatori delle migliaia.

---

## 6. Riferimenti da studiare (URL reali)

### Prodotti / casino live
- **Stake** — https://stake.com/ e https://stake.com/casino/home — tema scuro blu notte, "Stake Originals" con dark theme + accenti colorati, equilibrio professionale/immersivo.
- **Roobet** — https://roobet.com/ — estetica viola + verde neon, "neon-lit realm", playground digitale pulsante.

### Collezioni ispirazione (UI/branding)
- Dribbble — Casino UI: https://dribbble.com/tags/casino-ui
- Dribbble — Gambling UI: https://dribbble.com/tags/gambling-ui
- Dribbble — Casino App: https://dribbble.com/tags/casino_app
- Dribbble — esempio piattaforma: https://dribbble.com/shots/23736814-UX-UI-Design-of-Casino-Gambling-Platform
- Behance — Casino Game UI: https://www.behance.net/search/projects/casino%20game%20ui
- Behance — Casino Web Design: https://www.behance.net/search/projects/casino%20web%20design
- Colorlib — 17 Casino Website Design 2026: https://colorlib.com/wp/casino-website-design/
- Subframe — 25 Casino Website Design Examples: https://www.subframe.com/tips/casino-website-design-examples

### CodePen (slot / reel / animazioni)
- CSS-only Slot Machine: https://codepen.io/tangxuguo/pen/xqrNmx
- Simple CSS Slot Machine Animation: https://codepen.io/cnbkts/pen/QMXPZM
- CSS/JS Slot machine: https://codepen.io/MrFirthy/pen/oGVWqK
- Slot Machine Spinner: https://codepen.io/Thomasbetten/pen/nPeMPo
- Real Slots Reels (3D): https://codepen.io/josfabre/pen/abReBvP
- Reel Slot Machine (no JS): https://codepen.io/stevencamilleri-mrg/pen/abzGOGd

### Font (download)
- Bebas Neue — https://fonts.google.com/specimen/Bebas+Neue
- Anton — https://fonts.google.com/specimen/Anton
- Oswald — https://fonts.google.com/specimen/Oswald
- DSEG (7/14-segment) — https://www.keshikan.net/fonts-e.html
- Segment7 — https://fontlibrary.org/en/font/segment7

### CSS glow / neon (tecniche)
- CSS-Tricks — Neon Text with CSS: https://css-tricks.com/how-to-create-neon-text-with-css/
- Coder's Block — Creating Glow Effects with CSS: https://codersblock.com/blog/creating-glow-effects-with-css/
- FreeFrontend — 40+ CSS Glow Effects: https://freefrontend.com/css-glow-effects/

---

## 7. Checklist rapida per replicare l'estetica

- [ ] Sfondo scuro (near-black blu/viola), MAI bianco puro.
- [ ] Palette: base scura + 1-2 neon + oro. Alto contrasto.
- [ ] Font titoli condensato ultra-bold (Anton/Bebas Neue).
- [ ] Numeri jackpot/saldo con font LED (DSEG7) + glow verde/oro.
- [ ] CTA in oro metallico con bevel 3D + glow.
- [ ] Bordi neon (box-shadow multipli + inset glow) su card/CTA.
- [ ] Gradienti ovunque (oro, neon bicolore, radiale hero).
- [ ] Micro-animazioni: shine sweep, pulse, flicker, count-up.
- [ ] Feedback vincita: confetti + monete + verde neon + glow.
- [ ] Motivi: reel, ruota, monete/chips, marquee lights, ticker jackpot.
- [ ] Rispettare `prefers-reduced-motion`.

---

## Fonti

- The Best Color Schemes for Gambling Websites — https://mightymegaphone.com/2025/02/12/the-best-color-schemes-for-gambling-websites-designers-guide/
- Top 10 Color Palettes for Casino Branding (Lounge Lizard, 2025) — https://www.loungelizard.com/blog/top-10-color-palettes-for-casino-branding/
- The Psychology of Color in Casino Design (BetBoyz) — https://betboyz.com/igaming-branding-and-design/igaming-branding-the-psychology-of-color-in-casino-design/
- The Color of Luck: Palette Choices in Casino Game Design — https://www.seegreatart.art/the-color-of-luck-a-visual-study-of-palette-choices-in-casino-game-design/
- 17 Best Casino Website Design Inspiration 2026 (Colorlib) — https://colorlib.com/wp/casino-website-design/
- 25 Casino Website Design Examples (Subframe) — https://www.subframe.com/tips/casino-website-design-examples
- Inside the Digital Lobby: Casino Interface Design — https://www.muggsybogues.com/inside-the-digital-lobby-a-feature-spotlight-on-casino-interface-design/
- Stake — https://stake.com/ | https://stake.com/casino/home
- Stake Review (aesthetic details) — https://www.sportsgambler.com/review/stake/
- Roobet — https://roobet.com/
- Roobet Review (aesthetic details) — https://www.thespike.gg/reviews/roobet
- Dribbble Casino UI — https://dribbble.com/tags/casino-ui
- Dribbble Gambling UI — https://dribbble.com/tags/gambling-ui
- Behance Casino Game UI — https://www.behance.net/search/projects/casino%20game%20ui
- Bebas Neue (Google Fonts) — https://fonts.google.com/specimen/Bebas+Neue
- Anton (Google Fonts) — https://fonts.google.com/specimen/Anton
- Oswald (Google Fonts) — https://fonts.google.com/specimen/Oswald
- DSEG 7/14-segment fonts — https://www.keshikan.net/fonts-e.html
- Segment7 (Font Library) — https://fontlibrary.org/en/font/segment7
- 17 Royal Casino Fonts (HipFonts) — https://hipfonts.com/casino-fonts/
- Best Casino Fonts Free/Premium (Hyperpix) — https://hyperpix.net/fonts/casino-fonts/
- How to Create Neon Text With CSS (CSS-Tricks) — https://css-tricks.com/how-to-create-neon-text-with-css/
- Creating Glow Effects with CSS (Coder's Block) — https://codersblock.com/blog/creating-glow-effects-with-css/
- 47 Best CSS Glow Effects (TestMu AI) — https://www.testmuai.com/blog/glowing-effects-in-css/
- 40+ CSS Glow Effects (FreeFrontend) — https://freefrontend.com/css-glow-effects/
- CodePen — CSS-only Slot Machine — https://codepen.io/tangxuguo/pen/xqrNmx
- CodePen — Real Slots Reels — https://codepen.io/josfabre/pen/abReBvP
- CodePen — Reel Slot Machine — https://codepen.io/stevencamilleri-mrg/pen/abzGOGd