GlassmorphismGratuit

Beveled Control Panel

Trois panneaux d'instrument de 130 × 80 px à pans coupés de 12 px — un clip-path: polygon() en pixels, donc le même biseau à 45° quelle que soit la taille —, chiffres monospace néon cyan et rose, voile et lueur au survol : l'esthétique console, en CSS seul.

SVGClip-pathSci-Fi

Mis à jour le 27 octobre 2026

87% CPU Load

42°C Core Temp

3.2G Memory

Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Glassmorphism en contient 47 au total, dont 6 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

APPROCHE · PISTE 27Rennes – Saint-Jacques · 11 NM

3450Altitude ft

128Vitesse kt

274°Cap

Cessna 172 · volets 10°Descente −500 ft/min

① Instruments d'un simulateur de vol amateur — interface du cockpit

QuandEn approche de la piste 27 au crépuscule : le pilote virtuel lit altitude, vitesse et cap sur trois panneaux de la planche de bord, sous le pare-brise.

PourquoiLe biseau et le monospace néon rappellent l'avionique, et les chiffres à chasse fixe ne sautent pas quand la valeur change (3 450, 3 440…). La lueur au survol indique le panneau que le joueur consulte, sans cadre supplémentaire.

RéglagesPanneaux agrandis à 150 × 92 px, valeur à 25 px, libellé à 9,5 px ; biseau inchangé (12 px, il ne dépend pas de la taille) ; planche de bord en dégradé gris anthracite sous un pare-brise dessiné en CSS.

Cuve 3 — Ambrée d'automne

Fermentation jour 6 sur 10 · relevé de 14 h 10

CONFORME

19,4°Temp. °C

1,014Densité

1180Volume L

Avancement de la fermentation : 62 % (densité visée 1,010)

② Niveaux des cuves — écran d'une brasserie artisanale

QuandLe brasseur passe devant l'écran de la cuve 3 : température, densité et volume de la fermentation en cours, avec l'avancement vers la densité visée.

PourquoiDes chiffres gros et contrastés (12,8:1 en cyan) se lisent de loin dans une brasserie sombre ; le pan coupé donne l'aspect d'un instrument posé sur les cuves de cuivre, pas d'une carte de site web.

RéglagesPanneaux de 150 × 96 px, valeur à 26 px ; fond des panneaux légèrement éclairci (#1f1d3a → #0f0f22) pour se détacher des cuves ; virgule décimale française dans les valeurs (19,4°, 1,014).

PIXEL BAZARJEUX RÉTRO · ACHAT · VENTE · ÉCHANGE

59 €Mega Drive · état B

89 €Super NES · en boîte

24 €Game Boy · cartouche

Rayon C · consoles 1988-1996Tout testé en boutique

③ Étiquettes de rayon d'un magasin de jeux vidéo rétro

QuandÉcrans de rayon sous l'étagère des consoles : prix en grand, console et état de la cartouche dessous.

PourquoiL'esthétique console des années 80 parle directement aux clients ; la découpe en biseau sert de signalétique et le rose du panneau central (règle :nth-child(2) du code) met la pièce phare en avant.

RéglagesPanneaux de 152 × 96 px, prix à 26 px, libellé centré à 9,5 px sur deux mots ; enseigne néon et rayon de cartouches dessinés en dégradés au-dessus.

Comment ça marche

Chaque .bevel-panel (130 × 80 px, dégradé à 145° de #1a1a3e à #0f0f2a) est découpé par clip-path: var(--bvp-bevel), un polygon() de huit points écrits en calc() : 0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px…. Le pan coupé mesure toujours 12 px sur chaque axe, à 45°, sur un panneau de 130 × 80 comme de 150 × 96 px (mesuré dans les scènes) — une forme en pourcentages donnerait un biseau plat sur un panneau large. Les quatre coins retirent 2,8 % de la surface ; mesuré dans Chromium 151, Firefox 153 et WebKit 26, le point à 2 px du coin ne reçoit pas le clic.

Le texte est en 'Courier New', monospace, en capitales espacées de 1 px : la valeur .bp-val à 22,4 px, le libellé .bp-label à 8,8 px et 70 % d'opacité. Le premier et le troisième panneau sont en cyan #00ffcc, le deuxième en rose #ff6b9d (:nth-child(2)). Au survol, en 0,3 s : le texte s'éclaircit et prend une lueur (text-shadow: 0 0 8px de la même teinte à 80 %), et un voile ::before, découpé par la même variable, passe de l'opacité 0 à 1 avec un dégradé de la couleur à 15 % vers le transparent. Aucun JavaScript.

Le biseau est une variable CSS posée sur le panneau, --bvp-bevel, et non un <clipPath> SVG : sans SVG ni id, plusieurs copies collées dans la même page ne peuvent pas entrer en conflit, et la forme ne dépend d'aucun élément extérieur (un url(#bevel) sans SVG dans la page laisserait des rectangles, voir Squircle Cards). Ses points sont en pixels (calc(100% - 12px)) : les pans gardent 12 px quelle que soit la taille du panneau.

Accessibilité

Contraste : la valeur cyan #00ffcc sur #1a1a3e mesure 12,8:1, la rose #ff6b9d 6,2:1 — larges. Le libellé, à 70 % d'opacité, tombe à 6,8:1 en cyan mais à 3,7:1 en rose, sous le seuil de 4,5:1, et il ne fait que 8,8 px : passez .bp-label à 0.65rem et à opacity: .85 au minimum.
Couleur seule : le panneau rose ne dit pas pourquoi il est rose. Si la couleur signale une alerte (seuil dépassé), écrivez-le aussi dans le libellé ou dans un aria-label (« Température cœur : 42 °C, élevée »).
Clavier : des div avec cursor: pointer, sans rôle ni tabindex — Tab ne s'y arrête pas (mesuré), la lueur n'existe qu'à la souris. Pour des panneaux d'affichage, retirez cursor: pointer ; pour des panneaux cliquables, utilisez des <button> et reprenez la lueur sur :focus-visible (l'anneau de focus par défaut est rogné par clip-path). Pas de prefers-reduced-motion : seule une transition de couleur de 0,3 s, sans déplacement.

Compatibilité navigateur

CSS seul : clip-path: polygon() avec calc(), propriété personnalisée --bvp-bevel, dégradés, text-shadow, pseudo-élément ::before. Zéro JavaScript, zéro SVG. Mesuré collé dans une page vierge : biseau identique dans Chromium 151, Firefox 153 et WebKit 26.

Chrome 55+✓ Complet

Firefox 54+✓ Complet

Safari 13.1+✓ Complet

Edge 79+✓ Complet

Mobile iOS 13.4+✓ Complet (lueur au toucher seulement)

Android Chrome 55+✓ Complet

Sans clip-path (Firefox avant 54, Safari avant 13.1 sans préfixe), les panneaux restent rectangulaires et lisibles. Ajoutez -webkit-clip-path: var(--bvp-bevel) sur .bevel-panel et son ::before pour Safari 9 à 13.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML

<div class="bevel-panel-wrap">
    <div class="bevel-panel">
      <span class="bp-val">87%</span>
      <span class="bp-label">CPU Load</span>
    </div>
    <div class="bevel-panel">
      <span class="bp-val">42&deg;C</span>
      <span class="bp-label">Core Temp</span>
    </div>
    <div class="bevel-panel">
      <span class="bp-val">3.2G</span>
      <span class="bp-label">Memory</span>
    </div>
  </div>

CSS

/* Formes en clip-path: polygon(), sans SVG ni id : Pans coupés de 12 px à 45°, quelle que soit la taille du panneau. */
.bevel-panel {
  --bvp-bevel: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}

.bevel-panel-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}

.bevel-panel {
  clip-path: var(--bvp-bevel);
  background: linear-gradient(145deg, #1a1a3e, #0f0f2a);
  border: none;
  color: #00ffcc;
  width: 130px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.bevel-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--bvp-bevel);
  background: linear-gradient(145deg, rgba(0, 255, 204, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bevel-panel:hover::before {
  opacity: 1;
}

.bevel-panel:hover {
  color: #00ffee;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.8);
}

.bevel-panel .bp-val {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.bevel-panel .bp-label {
  opacity: 0.7;
  font-size: 0.55rem;
}

.bevel-panel:nth-child(2) {
  color: #ff6b9d;
}

.bevel-panel:nth-child(2):hover {
  color: #ff85b1;
  text-shadow: 0 0 8px rgba(255, 107, 157, 0.8);
}

.bevel-panel:nth-child(2)::before {
  background: linear-gradient(145deg, rgba(255, 107, 157, 0.15), transparent);
}

JavaScript (fx-0334)

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
Taille du biseau (CSS — `--bvp-bevel` sur `.bevel-panel`)	12 px à chaque coin	Remplacez les huit occurrences de `12px` dans le `polygon()` : 8 px pour un badge, 20 px pour un grand écran. Pour ne couper que deux coins opposés (haut gauche et bas droit) : `polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)`.
Couleurs (CSS — `color` de `.bevel-panel` et de `:nth-child(2)`)	cyan `#00ffcc`, rose `#ff6b9d` au deuxième	La lueur et le voile reprennent la teinte en dur (`rgba(0,255,204,…)`) : changez-les avec la couleur. Un ambre `#fbbf24` donne un écran d'alerte.
Taille (CSS — `width` / `height` de `.bevel-panel`)	130 × 80 px	Le biseau reste à 12 px. Agrandissez `.bp-val` avec le panneau : 25 px pour 150 × 92.
Lueur au survol (CSS — `.bevel-panel:hover`)	`text-shadow: 0 0 8px` à 80 %, voile à 15 %, 0,3 s	`0 0 14px` pour un néon plus franc ; ajoutez le même bloc sur `:focus-visible` si les panneaux deviennent des boutons.

FAQ

Pourquoi le biseau est-il en pixels et pas en pourcentages ?

Parce que le panneau n'est pas carré. En pourcentages, 10 % d'un panneau de 130 × 80 donnerait un pan de 13 px en largeur et 8 px en hauteur : un biseau aplati, plus à 45°. Avec calc(100% - 12px), chaque coin perd 12 px sur chaque axe, quelle que soit la taille — mesuré identique sur les panneaux de 130 × 80 et de 152 × 96 px de cette page.

Comment signaler qu'une valeur dépasse un seuil ?

Dans le code, le panneau rose est choisi par sa place (.bevel-panel:nth-child(2), dans trois règles : couleur, survol, lueur), pas par son état. Pour un vrai seuil, remplacez :nth-child(2) par une classe d'état, par exemple .bevel-panel--alerte, dans ces trois règles, et posez-la en JavaScript quand la valeur dépasse la limite (panneau.classList.toggle('bevel-panel--alerte', valeur > 40)). La couleur ne suffit pas : dites-le aussi en mots, dans le libellé ou un aria-label (« Température cœur : 42 °C, élevée »), et dans une région aria-live="polite" si l'alerte doit être annoncée au moment où elle survient.

Et la propriété corner-shape: bevel ?

corner-shape (avec border-radius) décrit précisément ce biseau et garde bordure et ombre sur la forme, ce que clip-path ne fait pas. Mais elle n'existe que dans Chrome et Edge récents — mesuré : CSS.supports('corner-shape', 'bevel') vrai dans Chromium 151, faux dans Firefox 153 et WebKit 26 — et ces deux derniers afficheraient des coins arrondis. clip-path: polygon() fonctionne partout depuis 2020 : c'est le choix du code vendu.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Beveled Control Panel

Exemples d'usage

① Instruments d'un simulateur de vol amateur — interface du cockpit

Cuve 3 — Ambrée d'automne

② Niveaux des cuves — écran d'une brasserie artisanale

③ Étiquettes de rayon d'un magasin de jeux vidéo rétro

Comment ça marche

Accessibilité

Compatibilité navigateur

Le code

Personnaliser

FAQ

Pourquoi le biseau est-il en pixels et pas en pourcentages ?

Comment signaler qu'une valeur dépasse un seuil ?

Et la propriété corner-shape: bevel ?

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Beveled Control Panel

Exemples d'usage

① Instruments d'un simulateur de vol amateur — interface du cockpit

② Niveaux des cuves — écran d'une brasserie artisanale

③ Étiquettes de rayon d'un magasin de jeux vidéo rétro

Comment ça marche

Accessibilité

Compatibilité navigateur

Le code

Personnaliser

FAQ

Pourquoi le biseau est-il en pixels et pas en pourcentages ?

Comment signaler qu'une valeur dépasse un seuil ?

Et la propriété corner-shape: bevel ?

Effets liés — Glassmorphism