Des dégradés qui bougent, sans écrire de shader.

Choisissez trois couleurs, une forme et un mouvement et genera calcule le dégradé 3D en temps réel, dans votre navigateur. Exportez-le en PNG ou en vidéo WebM, ou intégrez-le à votre site avec une iframe.

Créer un blend

Une iframe, et c'est en ligne

Copiez le code généré et collez-le dans votre page. Le blend s'affiche et s'anime. Sans installation. 

<iframe
  src="https://genera.mathieu-bravi.fr/blend-viewer?type=plane&color1=%2306c9e9&color2=%23260963&color3=%23151A4F&animate=on&uSpeed=0.6"
  title="Blend genera"
  loading="lazy"
  style="width: 100%; aspect-ratio: 16/9;
         border: 0; border-radius: 8px;"
></iframe>

La recette dans un fichier

Chaque blend tient dans un fichier JSON. Réimportez-le pour le modifer plus tard. 

{
  "type": "plane",
  "shader": "defaults",
  "uStrength": 4,
  "uDensity": 1.3,
  "uFrequency": 5.5,
  "uAmplitude": 4,
  "pixelDensity": 1,
  "color1": "#06c9e9",
  "color2": "#260963",
  "color3": "#151A4F",
  "grain": "off",
  "brightness": 1.4,
  "envPreset": "city",
  "lightType": "3d",
  "animate": "on",
  "uSpeed": 0.6,
  "cDistance": 3.6,
  "cameraZoom": 1.5,
  "cPolarAngle": 90,
  "cAzimuthAngle": 180,
  "positionX": -1.4,
  "positionY": 0,
  "positionZ": 0,
  "rotationX": 0,
  "rotationY": 10,
  "rotationZ": 50,
  "fov": 45
}

Tout se règle, à l'œil.

Un blend, c'est un dégradé 3D animé : trois couleurs mélangées sur une forme. Chaque curseur met l'aperçu à jour instantanément, vous ajustez jusqu'à ce que ça vous plaise.

  • 17 presets pour démarrer

    Halo, Mint, Sunset, Interstella… Partez d'une miniature, ou laissez le bouton « Aléatoire » vous proposer un blend.

  • Trois formes

    Un plan pour un fond classique, une surface d'eau qui ondule, une sphère pour un objet en relief.

  • Relief, grain et lumière

    Dosez l'intensité et la densité du bruit, ajoutez du grain, activez un éclairage d'ambiance (City, Dawn ou Lobby).

  • Un mouvement à votre rythme

    Animation figée ou en boucle, vitesse réglable de 0 à 2 : du flottement lent au remous rapide.

  • Un cadrage au degré près

    Distance, angles et champ de vision de la caméra, position et rotation de la forme : placez le blend exactement où vous le voulez.

  • PNG, WebM, iframe ou JSON

    Une image ou une vidéo aux formats du web et des réseaux (paysage, carré, story, haute définition), une iframe pour votre site, un fichier JSON pour reprendre le blend plus tard.

Générez votre blend en cinq étapes.

Forme, texture, couleurs, animation, caméra : passez d'une étape à l'autre librement.

Étape 1/5 Forme

Partez d'un preset ou d'une forme

Presets

Forme

Texture du dégradé

Couleurs et lumière

Choix des couleurs

Flèches gauche et droite pour la teinte, haut et bas pour l'intensité. Le grand point entraîne les autres.

Éclairage d'ambiance

Grain

Animation

Animation

Caméra et cadrage

Position de l'objet
Rotation de l'objet

Cadre

Exporter le blend

Cadre Paysage, modifiable sous l'aperçu

Une image fixe, pour vos maquettes, présentations ou réseaux sociaux.

Qualité

Questions fréquentes

Qu'est-ce qu'un blend ?
Un dégradé 3D animé : trois couleurs mélangées sur une forme (plan, eau ou sphère), avec du relief, du grain et du mouvement. Il est calculé en temps réel par votre carte graphique, ce n'est pas une vidéo.
C'est gratuit ? Faut-il un compte ?
C'est gratuit, et aucun compte n'est nécessaire. Tout se passe dans votre navigateur : rien à installer, rien à créer.
Comment intégrer un blend sur mon site ?
Cliquez sur « Exporter le blend », onglet « Sur un site », puis copiez le code et collez-le dans votre page (HTML, WordPress, Webflow, Framer…). Le blend prend toute la largeur disponible, au ratio du cadre choisi, et s'affiche tel que vous l'avez laissé.
Quels formats puis-je exporter ?
Choisissez d'abord un cadre sous l'aperçu (Paysage, Carré, Portrait ou Story), puis cliquez sur « Exporter le blend » : une image (qualité standard ou haute définition), une vidéo de 5, 10 ou 15 secondes, ou le code pour votre site. La vidéo, au format WebM, s'enregistre dans Chrome, Edge ou Firefox.
Je me suis trompé : comment revenir en arrière ?
« Annuler » (ou Ctrl+Z) défait la dernière modification, « Réinitialiser » revient aux réglages par défaut. « Aléatoire » tire un nouveau blend : s'il ne vous plaît pas, annulez-le.
Comment reprendre un blend plus tard ?
Cliquez sur « Sauvegarder le blend » : vous obtenez un petit fichier. Plus tard, « Ouvrir un blend » le recharge, et couleurs, forme, animation et caméra reviennent à l'identique.
Plan, eau ou sphère : quelle différence ?
Le plan donne un fond plat, idéal derrière un texte. L'eau ajoute des ondulations, comme une surface liquide. La sphère crée un objet en relief, à cadrer avec la caméra à l'étape 5.
À quoi servent les ambiances City, Dawn et Lobby ?
Ce sont des éclairages issus de photos HDR : ils ajoutent des reflets et des nuances de lumière. Activez l'éclairage d'ambiance à l'étape 3 pour les choisir.
Sur quelle technologie repose genera ?
Sur Three.js, une librairie open source (licence MIT) construite avec WebGL. genera en fait un éditeur guidé, en français, avec export PNG, JSON et iframe.

Trois couleurs suffisent.

Prenez un preset, changez ce qui vous plaît, intégrez le résultat. C'est gratuit et sans inscription.

Créer un blend Voir un exemple