EN FR

Générateur d'Effets Visuels Modernes

Créez des effets glassmorphism, neumorphism, hybrides, de texte et des animations keyframes avec courbes d'accélération. Vérificateur de contraste et simulateur de daltonisme intégrés. Export CSS, Tailwind, React JSX.

Carte en verre

Ajustez les curseurs pour personnaliser cet effet.

Simuler :

Vérificateur de Contraste d'Accessibilité (WCAG 2.1)

Ratio : 21.00 AAA
AA Normal ✓ AA Large ✓ AAA Normal ✓ AAA Large ✓

Questions Fréquemment Posées

Qu'est-ce que le glassmorphism ?

Un effet de verre dépoli obtenu avec backdrop‑filter: blur() et un fond semi‑transparent. Utilisez les curseurs pour ajuster le flou, l'opacité, l'ombre et l'arrondi. Export en CSS, Tailwind ou React JSX.

Comment créer du neumorphism ?

Le neumorphism (soft UI) utilise des doubles ombres pour créer des effets convexes, concaves ou enfoncés. Choisissez une couleur de fond, ajustez la distance et l'intensité. Idéal pour boutons, cartes et formulaires.

Puis-je générer des keyframes personnalisés ?

Oui ! Le mode Keyframes vous permet de définir des étapes d'animation (fondu, glissement, échelle, rotation). Prévisualisez l'animation et exportez la règle @keyframes complète.

Comment fonctionne l'éditeur d'easing ?

Faites glisser les deux poignées sur le canevas de la courbe de Bézier pour modeler votre accélération. L'outil génère la fonction cubic‑bezier() exacte. Préréglages ease, ease‑in, ease‑out disponibles.

Le vérificateur de contraste est-il fiable ?

Oui, il calcule le ratio WCAG 2.1 en temps réel entre la couleur du texte et du fond. Il affiche la conformité AA/AAA pour le texte normal et large, assurant la lisibilité de vos effets.

Le simulateur de daltonisme fonctionne-t-il ?

Il utilise les filtres de matrice LMS de Brettel‑Viénot pour simuler protanopie (rouge), deutéranopie (vert) et tritanopie (bleu). Activez ces filtres sur l'aperçu.

Puis-je exporter un composant React ?

Oui, l'onglet React génère un composant fonctionnel complet avec des props personnalisables pour vos styles glass/neumorph, incluant la classe d'animation et les PropTypes TypeScript.

Que contient la Galerie ?

Des préréglages prêts à l'emploi : cartes givrées, boutons neumorphiques, texte lumineux, squelettes de chargement, barres de navigation vitrées, etc. Cliquez pour charger et personnalisez.

L'outil est-il gratuit ?

Totalement gratuit. Sans inscription, sans publicité, sans limite. Tous les effets créés vous appartiennent pour usage personnel ou commercial.

Comment fonctionne le partage d'URL ?

Cliquez sur "Partager l'URL" pour encoder toute votre configuration (mode, curseurs, couleurs, animation) dans le lien. Envoyez‑le à un collègue, il verra exactement le même effet.