Générateur d'ombres CSS
Générez des ombres CSS avec un aperçu en direct. Ajustez le décalage, le flou, la diffusion, la couleur et l'opacité — puis empilez jusqu'à 4 ombres et copiez le CSS.
Foire aux questions
Qu'est-ce qu'une ombre CSS box-shadow ?
La propriété CSS box-shadow attache un ou plusieurs effets d'ombre au cadre d'un élément. Vous pouvez contrôler le décalage horizontal et vertical (position), le rayon de flou (douceur), le rayon de diffusion (taille), la couleur et si l'ombre est interne ou externe.
Que fait "intérieur" (inset) ?
Sans inset, une ombre de boîte est dessinée à l'extérieur de l'élément comme une ombre portée. Avec inset, l'ombre est dessinée à l'intérieur de la bordure de l'élément, donnant un effet de lueur intérieure ou de surface enfoncée.
Puis-je empiler plusieurs ombres de boîte ?
Oui — CSS permet plusieurs ombres séparées par des virgules sur une seule propriété box-shadow. Utilisez "Ajouter une couche d'ombre" pour créer jusqu'à 4 ombres superposées. La première ombre de la liste est dessinée au-dessus.