Catégories

← View All Tools

Générateur d'Ombre de Boîte CSS

Génère des propriétés d'ombre de boîte CSS

-100 -100 100
-100 4 100
0 10 100
-50 -50 50
0 0.2 1

Points clés

Catégorie
Design
Types d’entrée
range, color, checkbox
Type de sortie
text
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

Créez facilement des effets d'ombre portée personnalisés pour vos éléments web grâce à notre générateur CSS intuitif, permettant d'ajuster précisément le rendu visuel de vos interfaces.

Quand l’utiliser

  • •Pour ajouter de la profondeur et du relief à vos cartes ou boutons.
  • •Pour créer des effets de survol (hover) dynamiques sur vos composants UI.
  • •Pour générer rapidement le code CSS nécessaire sans manipuler manuellement les valeurs de la propriété box-shadow.

Comment ça marche

  • •Ajustez les curseurs pour définir les décalages horizontal et vertical de l'ombre.
  • •Modifiez le rayon de flou et de propagation pour contrôler la diffusion de l'ombre.
  • •Sélectionnez la couleur et l'opacité, puis activez l'option 'inset' pour une ombre intérieure si nécessaire.
  • •Copiez le code CSS généré instantanément pour l'intégrer directement dans votre feuille de style.

Cas d’usage

Conception de cartes de profil avec une ombre douce pour un effet de surélévation.
Stylisation de boutons d'appel à l'action pour les rendre plus visibles.
Création d'effets de profondeur pour des interfaces de type 'Neumorphisme'.

Exemples

1. Ombre douce pour carte UI

Développeur Front-end
Contexte
Besoin d'un style épuré pour des cartes de contenu.
Problème
L'ombre par défaut est trop marquée et manque de subtilité.
Comment l’utiliser
Régler le flou à 20px, l'opacité à 0.1 et un décalage vertical léger.
Configuration d’exemple
horizontal: 0, vertical: 4, blur: 20, spread: 0, opacity: 0.1
Résultat
Une ombre légère et diffuse qui donne un aspect élégant et moderne aux cartes.

2. Effet de bouton enfoncé

Designer Web
Contexte
Création d'un état actif pour un bouton de formulaire.
Problème
Le bouton doit paraître enfoncé dans la page lors du clic.
Comment l’utiliser
Activer l'option 'inset' et ajuster les décalages pour simuler une pression.
Configuration d’exemple
horizontal: 0, vertical: 2, blur: 5, spread: 0, opacity: 0.3, inset: true
Résultat
Un effet visuel d'enfoncement immédiat renforçant l'interactivité du bouton.

Tester avec des échantillons

design
Exemples de Sélecteurs CSS
Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse
title token css
sample
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
title token css
sample
Exemples du Framework CSS Milligram
Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants
title token css
sample
Exemples du Framework CSS Bulma
Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS
title token css
sample

Hubs associés

Outils Design pour Generate
Découvrez 19 outils design pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Design pour Convert
Découvrez 98 outils design pour des workflows de convert et comparez rapidement des utilitaires proches.
Outils Json pour Generate
Découvrez 33 outils json pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Pdf pour Generate
Découvrez 10 outils pdf pour des workflows de generate et comparez rapidement des utilitaires proches.

FAQ

Qu'est-ce que le rayon de propagation ?

Le rayon de propagation permet d'agrandir ou de réduire la taille de l'ombre par rapport à l'élément d'origine.

Puis-je créer des ombres intérieures ?

Oui, il suffit de cocher l'option 'Ombre Intérieure' pour appliquer l'effet à l'intérieur de la boîte.

Le code généré est-il compatible avec tous les navigateurs ?

Oui, le code utilise la propriété standard 'box-shadow' supportée par tous les navigateurs modernes.

Comment ajuster la transparence de l'ombre ?

Utilisez le curseur 'Opacité' pour modifier la valeur alpha de la couleur choisie.

Puis-je utiliser des valeurs négatives ?

Oui, les décalages horizontal et vertical acceptent des valeurs négatives pour déplacer l'ombre vers la gauche ou le haut.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/box-shadow-generator

Paramètres de la requête

Nom du paramètre Type Requis Description
horizontal range Oui -
vertical range Oui -
blur range Oui -
spread range Oui -
color color Oui -
opacity range Oui -
inset checkbox Non -

Format de réponse

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texte: Texte

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-box-shadow-generator": {
      "name": "box-shadow-generator",
      "description": "Génère des propriétés d'ombre de boîte CSS",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=box-shadow-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]