Vintage Photo
Traitement photo rétro 100 % CSS : dégradé sépia, grain fractal SVG, vignette radiale et overlay couleur en mix-blend-mode — aucun JS, aucune dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le fond sépia est un dégradé linéaire à quatre stops progressant du sable chaud (#d4a574) vers le brun chocolat foncé (#5a4a3a). Il simule la gamme tonale d'un tirage argentique ancien sans image réelle — remplacez-le par un background-image pour appliquer le traitement à une vraie photo.
Le grain photographique vient du pseudo-élément ::before : un SVG inline en data URI contenant un filtre feTurbulence (type="fractalNoise", baseFrequency="0.8", numOctaves="6", stitchTiles="stitch") appliqué sur un rect plein cadre. Rendu à opacity: 0.2 avec mix-blend-mode: overlay, la texture de bruit se fond dans les tons chauds sans masquer le contenu.
La vignette est le pseudo-élément ::after : un radial-gradient transparent jusqu'à 40 % du centre puis noir à 50 % d'opacité en périphérie. Il assombrit les coins et concentre le regard vers le centre, comme un objectif légèrement sous-diaphragmé.
Le div.ng-vintage-overlay superpose un dégradé ambre chaud en mix-blend-mode: color — seule la teinte et la saturation sont appliquées sur la luminosité existante, ce qui donne la dominante jaune-brun vintage sans altérer les valeurs tonales ni écraser la vignette.
Accessibilité
- Aucune animation : l'effet est 100 % CSS statique (pas de transition, pas de keyframe).
prefers-reduced-motionn'est pas implémenté et n'est pas nécessaire. - Le SVG de l'icône photo (
.ng-vintage-icon svg) n'a pas d'aria-labelni derole="img"dans le code livré — ajoutezaria-hidden="true"si l'icône est purement décorative, ou untitleSVG si elle est informative. - Le
.ng-vintage-scenene porte pas de rôle ARIA dans le code de base — pour un usage informatif, ajoutezrole="img"et unaria-labeldécrivant le contenu visuel. - Le texte
h3(rgba(255,255,255,0.85)) sur le dégradé brun-moyen n'atteint pas systématiquement le ratio WCAG AA 4,5:1 — ajoutez untext-shadowsombre ou montez l'opacité à 1 pour garantir la conformité. - Pas d'interaction clavier : l'effet est purement visuel. Les CTA placés en overlay doivent porter leurs propres styles
:focus-visible.
Compatibilité navigateur
Nécessite SVG inline en data URI, feTurbulence et mix-blend-mode — supportés dans tous les navigateurs modernes depuis 2016.
Sans <code>mix-blend-mode</code> (IE 11), les overlays s'affichent en mode normal : le dégradé sépia et la vignette restent visibles, seule la dominante couleur vintage disparaît. L'effet reste cohérent.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="ng-vintage-scene">
<!-- overlay couleur vintage (mix-blend-mode: color) -->
<div class="ng-vintage-overlay"></div>
<!-- contenu centré en overlay -->
<div class="ng-vintage-content">
<div class="ng-vintage-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">…</svg>
</div>
<h3>Titre</h3>
<p>Sous-titre</p>
</div>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| .ng-vintage-scene background (dégradé base) | #d4a574 → #5a4a3a | Tons de base de la photo. Remplacez par des verts délavés pour un cyanotype, des bleus froids pour un look argentique, ou passez en background-image pour appliquer le traitement à une vraie photo. |
| ::before opacity | 0.2 | Intensité du grain. 0.05 = grain quasi-invisible, 0.35 = grain fort style film 3200 ISO. |
| feTurbulence baseFrequency (dans le data URI SVG) | 0.8 | Finesse du grain : 0.3 = gros grain pictorialiste, 1.2 = grain très fin argentique rapide. |
| feTurbulence numOctaves (dans le data URI SVG) | 6 | Complexité de la texture : 3 = grain uniforme simple, 8 = grain multi-échelle réaliste (légèrement plus lourd au rendu initial). |
| ::after background (vignette radiale) | transparent 40%, rgba(0,0,0,.5) 100% | Étendue et opacité de la vignette. Réduisez le noir à 0.25 pour un assombrissement subtil, montez à 0.75 pour un rendu dramatique style daguerréotype. |
| .ng-vintage-overlay background | rgba(180,140,80,.2) → rgba(120,80,40,.3) | Dominante colorée vintage. Remplacez par de la lavande pour un look violet rétro, ou par du bleu-vert froid pour un traitement cyanotype. |
| .ng-vintage-scene border-radius | 8px | Arrondi du cadre. 0 = photo plein format sans bord, 50% avec ratio 1:1 = médaillon rond style portrait cabinet. |
FAQ
img ne supporte pas les pseudo-éléments ::before/::after. La solution : enveloppez l'image dans un div.ng-vintage-scene et passez-la en background-image avec background-size: cover, ou positionnez un <img> en position: absolute; inset: 0; object-fit: cover à l'intérieur du wrapper..ng-vintage-overlay background. Pour un cyanotype bleu : rgba(80,120,180,.25) vers rgba(40,70,120,.35). Pour un ton vert délavé : rgba(80,130,90,.2) vers rgba(40,80,50,.3). Le mix-blend-mode: color garantit que la dominante reste harmonieuse avec la vignette.feTurbulence est calculé une seule fois au premier rendu puis rastérisé. L'effet est entièrement statique — aucun JS ne tourne, aucun requestAnimationFrame n'est lancé, zéro impact batterie après l'affichage initial.
