Softonic

Générateur de carte CSS

Étape 1 / 2

Titre de la carte

Ceci est un aperçu de votre carte.

Suivant

Une carte est le conteneur derrière les vignettes de produit, les aperçus de blog, les profils et les widgets de tableau de bord. Ce générateur met en forme ce conteneur : choisissez la couleur de fond et de bordure, le rayon des angles, l’espacement intérieur et une ombre douce, puis visualisez le résultat sur la page. L’aperçu montre un contenu de démonstration ; remplacez-le par votre propre titre, votre texte et vos actions. Le résultat est une classe CSS prête à l’emploi.

Comment mettre en forme un conteneur de carte

  1. 1

    Choisir les couleurs

    Choisissez la couleur de fond et la couleur de bordure de la carte.

  2. 2

    Définir la forme

    Choisissez le rayon des angles et l’espacement intérieur adaptés à votre mise en page.

  3. 3

    Ajouter l’ombre

    Réglez le flou et l’opacité de l’ombre douce portée sous la carte.

  4. 4

    Aperçu et copie

    Vérifiez l’aperçu en direct et copiez le CSS .card généré dans votre feuille de style.

Ce que contient le CSS généré

L’outil produit une classe unique nommée .card :

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background est la couleur que vous avez choisie
  • border est toujours de 1 px plein dans la couleur choisie
  • border-radius et padding correspondent à vos valeurs en px
  • box-shadow utilise un décalage fixe de 4 px vers le bas avec vos valeurs de flou et d’opacité

L’aperçu est un contenu de démonstration

L’aperçu affiche un titre et un paragraphe pour que vous puissiez juger les proportions. L’outil ne produit pas de HTML : appliquez la classe à votre propre conteneur et ajoutez-y votre titre, votre texte, votre image ou vos boutons d’action. Si la carte doit reposer sur un fond de page coloré, vérifiez le contraste de la bordure à cet endroit, pas seulement dans l’aperçu.

Limites raisonnables

Les valeurs négatives sont ramenées à zéro et l’opacité de l’ombre reste entre 0 et 1. Des valeurs d’espacement ou de flou très élevées peuvent donner des résultats inattendus ; gardez donc les réglages dans les plages que vous utiliseriez dans une vraie mise en page.

Combiner avec votre propre balisage

Un exemple minimal pour votre page :

<div class="card">
  <h3>Nom du produit</h3>
  <p>Description courte</p>
</div>

Le style du conteneur ne contraint pas le contenu : il gère uniquement le fond, la bordure, l’espacement et l’ombre.

Questions fréquentes

Non. Il produit uniquement la classe CSS .card. Construisez vous-même le balisage, par exemple un div ou un article qui contient votre titre, votre texte et vos actions.

La bordure générée est toujours de 1 px plein. Modifiez la ligne border dans le CSS si vous avez besoin d’une autre épaisseur ou d’un autre style.

Un décalage vertical fixe de 4 px garde l’ombre discrète et lisible. Vous contrôlez sa douceur (flou) et son intensité (opacité).

Non. Le texte de l’aperçu sert uniquement à l’affichage. Le CSS copié ne contient pas de contenu, seulement les styles du conteneur.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.