Générateur CSS

Dégradés, ombres et coins arrondis, avec aperçu et code prêt à copier.

Outil exécuté dans votre navigateur : vos fichiers ne quittent pas votre appareil.

Générateur CSS : dégradé, ombre et border-radius

Réglez vos effets visuels avec des curseurs plutôt qu'en tâtonnant dans le code. Le générateur produit des dégradés linéaires, radiaux ou coniques, des ombres box-shadow superposées (y compris intérieures), des coins arrondis en px, % ou rem et un effet de verre dépoli avec backdrop-filter. L'aperçu se met à jour en direct et le CSS est prêt à copier. Tout fonctionne dans votre navigateur.

Points forts

  • Dégradés linéaires, radiaux et coniques, avec plusieurs arrêts de couleur et transparence
  • Modèles de dégradés prêts à l'emploi
  • Plusieurs ombres superposées, intérieures ou extérieures
  • Coins arrondis identiques ou indépendants, en px, % ou rem
  • Effet verre dépoli : flou, opacité, saturation, bordure
  • Code CSS à copier en un clic

Comment ça marche

  1. Choisissez l'onglet : dégradé, ombre portée, coins arrondis ou verre dépoli.
  2. Réglez les curseurs et les couleurs.
  3. Vérifiez le rendu dans l'aperçu.
  4. Copiez le code CSS.

Questions fréquentes

Comment faire un dégradé en CSS ?

Avec la propriété background et la fonction linear-gradient(), radial-gradient() ou conic-gradient(). Le générateur écrit la déclaration à partir des couleurs et de l'angle choisis.

Comment obtenir une ombre réaliste ?

Superposez plusieurs ombres : une diffuse et peu opaque, une plus nette et plus proche de l'élément. Le générateur permet d'en ajouter autant que nécessaire.

Qu'est-ce que l'effet verre dépoli (glassmorphism) ?

Un fond semi-transparent qui floute ce qui se trouve derrière lui, obtenu avec backdrop-filter. Réglez le flou, l'opacité et la bordure, puis copiez le CSS.

Outils similaires

Tous les outils « Web et développeurs »