🎨 Générateur de DIV / Card

Créé ton bloc, personnalise le, et copie le code autonome, Presets + arrière-plan image Base64 compressée (WebP/JPEG) — export code.

localStorage : —

image : —

Réglages

Choisir un preset

Astuce : clique un preset, puis ajuste au besoin dans les accordéons.

Largeur (px)

Padding (px)

Espacement titres (px)

Alignement

Type

Couleur

Opacité

Importer & compresser

Fichier image

Glisser-déposer une image ici

Ou clique “Fichier image” juste au-dessus. Sur mobile : sélection via le bouton fichier.

Cible (Ko)

La compression auto ajuste largeur + qualité pour viser la taille cible (≈). Résultat meilleur en WebP.

Aperçu image compressée

—

Largeur max

Qualité (0.3..1)

Format

Aucune image

L’outil crée une data:image/...;base64 compressée via canvas.
Attention : très grosses images = Base64 lourd (et localStorage limité).

URL / Base64 (dataURL)

Taille

Position

Répétition

Teinte (overlay 0..1)

Arrondi (px)

Ombre

Bordure (px)

Couleur bordure

Flou “glass” (px)

Fond glass (0..1)

Le mode “glass” utilise backdrop-filter (support variable selon navigateur).

Titre Texte

Taille titre (px)

Taille texte (px)

Couleur titre

Couleur texte

Tags (séparés par virgules)

Afficher un bouton

Code généré

Le fichier export contient la card + son CSS (prêt à coller).
Si tu utilises une image Base64, elle est intégrée telle quelle.

Container : #accScroll

Aperçu

Card : #previewCard

Ajuste les accordéons à gauche : arrière-plan (couleur/dégradé/image), arrondis, ombres, texte, bouton…
L’image importée peut être automatiquement compressée en Base64 (WebP/JPEG) pour être utilisée en fond.