Créez un gradient elliptique centré de #FFFFFF à 0% vers #0F172A à 100%, puis ajoutez un point médian. La déclaration obtenue illustre le calcul d’insertion, pas un préréglage importé ni une palette au contraste certifié.
Placez une ellipse à 50% 50%
Choisissez Radial, Ellipse et les deux coordonnées du centre à 50. Partez seulement des deux couleurs extrêmes indiquées, puis ajoutez un point une fois. Il reçoit la position 50 et la couleur #878B95 : les moyennes arrondies des canaux sont 135, 139 et 149. Ne remplacez pas cette couleur pour ce cas. Les trois lignes reproduisent la sortie sans dépendre de la luminosité apparente.
Vérifiez la sortie radiale et la forme du bloc
Résultat attendu : background-image: radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, #878B95 50%, #0F172A 100%);. Aucun angle ne figure dans cette déclaration radiale. La taille omise utilise la valeur CSS farthest-corner. Un bloc large et un bloc carré présentent donc des proportions différentes avec le même CSS. Passer d’Ellipse à Cercle ou déplacer le centre change la déclaration, pas seulement sa présentation.
Vérifiez la déclaration dans son contexte réel
Gardez un background-color de repli et enregistrez le CSS avant de recharger : les palettes ne sont pas conservées. Testez les navigateurs et dimensions visés. Vérifiez le contraste sur tout le gradient visible, pas en un point ; l’aperçu ne certifie ni accessibilité ni compatibilité.