Générateur d’ombres CSS

Comprendre les valeurs d’une ombre CSS

box-shadow combine les décalages horizontal et vertical, le flou, l’étalement, la couleur et éventuellement inset. text-shadow utilise les décalages, le flou et la couleur. Les réglages actualisent immédiatement la déclaration complète pour montrer l’effet de chaque valeur.

Créer de la profondeur avec plusieurs couches

Plusieurs ombres discrètes paraissent souvent plus naturelles qu’une seule ombre forte. Associez une couche sombre et serrée pour le contact à une couche plus douce et large pour l’élévation, ou superposez des couleurs pour obtenir une lueur.

De l’aperçu au CSS de production

Choisissez box-shadow ou text-shadow, partez d’un préréglage, puis ajustez position, flou, étalement, opacité, rayon et couleurs. Copiez le CSS lorsque l’aperçu convient et testez-le sur le véritable fond et les états responsifs du projet.

Apprendre et poursuivre la création