Trois cartes de 110 px découpées en vraie superellipse (|x|⁴ + |y|⁴ = 1, 64 points en clip-path: polygon()), chacune posée sur une ombre floue de sa propre couleur : la courbe continue des icônes de téléphone, en CSS seul, sans SVG ni identifiant.
Mis à jour le
Cet effet est gratuit — la catégorie Glassmorphism en contient 47 au total, dont 6 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Nouveautés de la semaine : 38 titresRetour avant le 12 novembre
Bonjour Maëlle — les courts 2 et 5 sont libres à 18 h
Courts ouverts de 8 h à 22 hTerrain sec · 14 °C
Collection d'automne : 42 pièces cousues à Roubaix et à Cholet
Fabriqué en FranceRéparation offerte 2 ansRetour sous 30 jours
Chaque carte .squircle-card (110 × 110 px, dégradé à 135°, texte blanc de 12 px en graisse 600) est découpée par clip-path: var(--sqc-squircle). La variable, déclarée sur la carte elle-même, contient un polygon() de 64 points en pourcentages calculés sur la superellipse d'exposant 4 : la courbure varie sans à-coup du côté vers le coin, là où un border-radius enchaîne une droite et un quart de cercle. La forme retire 7,3 % de la surface de la boîte (calcul) ; au coin, le bord passe à 8,8 px de l'angle sur chaque axe. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : le point situé à 2 px du coin ne reçoit pas le clic, il tombe sur le parent. En pourcentages, la forme suit la taille de la carte : à 142 px dans la deuxième scène, elle reste une superellipse.
Les couleurs passent par deux variables posées sur l'enveloppe .squircle-card-shadow : style="--sqc-from: #6366f1; --sqc-to: #8b5cf6;". La carte peint linear-gradient(135deg, var(--sqc-from), var(--sqc-to)) var(--sqc-from) — un dégradé posé sur une couleur unie, ce qui garde le texte blanc lisible là où les dégradés ne s'affichent pas. L'ombre est le ::after de l'enveloppe : 94 × 20 px, 6 px sous la carte, même dégradé, border-radius: 50%, filter: blur(12px), opacité 0,4, z-index: -1 ; isolation: isolate sur l'enveloppe la garde au-dessus du fond de la page. Au survol, la carte monte de 4 px, grossit de 8 % et s'éclaircit de 15 % en 0,4 s, avec un léger rebond (cubic-bezier(0.34, 1.56, 0.64, 1)).
Pourquoi la forme est écrite dans le CSS (--sqc-squircle: polygon(…)) plutôt que dans un <clipPath> SVG appelé par clip-path: url(#squircle) : un tel appel ne marche que si le SVG est présent dans la page, avec un id unique ; sans lui, les cartes s'affichent en carrés (mesuré : 0 % de surface découpée, coin cliquable). En CSS, rien à ajouter, et plusieurs effets collés dans la même page ne peuvent pas entrer en collision. Deux détails vont avec : le dégradé est porté par la carte elle-même, pas par une enveloppe qui peindrait un rectangle derrière la forme découpée, et l'ombre colorée vit dans un contexte d'empilement propre — en z-index: -1 sans lui, elle passerait sous le fond de la page et ne se verrait jamais.
#6366f1 (limite), 3,53:1 sur #ec4899, 2,43:1 sur #06b6d4. Seule la première carte tient presque le seuil. Assombrissez --sqc-from : les scènes de cette page utilisent #6d28d9, #be123c, #0f766e ou #1d4ed8, toutes au-dessus de 5:1.div avec cursor: pointer, sans rôle ni tabindex — Tab ne s'y arrête pas (mesuré). Pour des raccourcis cliquables, remplacez .squircle-card par un <a> ou un <button> ; attention, clip-path rogne aussi l'anneau de focus : donnez-en un à l'enveloppe (.squircle-card-shadow:focus-within { outline: 2px solid; outline-offset: 4px }). Les icônes (⚙ ♥ ★) sont lues par la synthèse vocale : aria-hidden="true" sur .sq-icon.@media (prefers-reduced-motion: reduce) { .squircle-card { transition: none } .squircle-card:hover { transform: none } }.CSS seul : clip-path: polygon() en pourcentages, propriétés personnalisées (--sqc-*), dégradés, filter: blur() et brightness(), isolation. Zéro JavaScript, zéro SVG, zéro dépendance. Mesuré collé dans une page vierge : forme identique dans Chromium 151, Firefox 153 et WebKit 26 (Safari), coin hors de la zone cliquable dans les trois.
Sans clip-path sur les éléments HTML (Safari avant 13.1 sans le préfixe -webkit-clip-path, Firefox avant 54), la carte s'affiche carrée, contenu et couleurs intacts. Pour Safari 9 à 13 : ajoutez -webkit-clip-path: var(--sqc-squircle) à côté de la ligne d'origine.
Copiez les trois blocs dans votre page. Aucune dépendance.
<div class="squircle-cards-wrap">
<div class="squircle-card-shadow" style="--sqc-from: #6366f1; --sqc-to: #8b5cf6;">
<div class="squircle-card"><span class="sq-icon">⚙</span>Settings</div>
</div>
<div class="squircle-card-shadow" style="--sqc-from: #ec4899; --sqc-to: #f43f5e;">
<div class="squircle-card"><span class="sq-icon">♥</span>Health</div>
</div>
<div class="squircle-card-shadow" style="--sqc-from: #06b6d4; --sqc-to: #3b82f6;">
<div class="squircle-card"><span class="sq-icon">★</span>Photos</div>
</div>
</div>/* Formes en clip-path: polygon(), sans SVG ni id : Superellipse n = 4 (|x|^4 + |y|^4 = 1), 64 points en % de la carte. */
.squircle-card {
--sqc-squircle: polygon(0% 50%, 0.1% 34.3%, 0.5% 27.9%, 1.1% 23.1%, 1.9% 19.1%, 3% 15.7%, 4.4% 12.7%, 6% 10.2%, 8% 8%, 10.2% 6%, 12.7% 4.4%, 15.7% 3%, 19.1% 1.9%, 23.1% 1.1%, 27.9% 0.5%, 34.3% 0.1%, 50% 0%, 65.7% 0.1%, 72.1% 0.5%, 76.9% 1.1%, 80.9% 1.9%, 84.3% 3%, 87.3% 4.4%, 89.8% 6%, 92% 8%, 94% 10.2%, 95.6% 12.7%, 97% 15.7%, 98.1% 19.1%, 98.9% 23.1%, 99.5% 27.9%, 99.9% 34.3%, 100% 50%, 99.9% 65.7%, 99.5% 72.1%, 98.9% 76.9%, 98.1% 80.9%, 97% 84.3%, 95.6% 87.3%, 94% 89.8%, 92% 92%, 89.8% 94%, 87.3% 95.6%, 84.3% 97%, 80.9% 98.1%, 76.9% 98.9%, 72.1% 99.5%, 65.7% 99.9%, 50% 100%, 34.3% 99.9%, 27.9% 99.5%, 23.1% 98.9%, 19.1% 98.1%, 15.7% 97%, 12.7% 95.6%, 10.2% 94%, 8% 92%, 6% 89.8%, 4.4% 87.3%, 3% 84.3%, 1.9% 80.9%, 1.1% 76.9%, 0.5% 72.1%, 0.1% 65.7%);
}
.squircle-cards-wrap {
display: flex;
gap: 14px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 10px;
}
.squircle-card {
width: 110px;
height: 110px;
background: linear-gradient(135deg, var(--sqc-from, #6366f1), var(--sqc-to, #8b5cf6)) var(--sqc-from, #6366f1);
clip-path: var(--sqc-squircle);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 0.75rem;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
cursor: pointer;
position: relative;
}
.squircle-card:nth-child(2) {
background: linear-gradient(135deg, #ec4899, #f43f5e);
}
.squircle-card:nth-child(3) {
background: linear-gradient(135deg, #06b6d4, #3b82f6);
}
.squircle-card .sq-icon {
font-size: 1.8rem;
margin-bottom: 4px;
}
.squircle-card:hover {
transform: scale(1.08) translateY(-4px);
filter: brightness(1.15);
}
.squircle-card-shadow {
width: 110px;
height: 110px;
position: relative;
isolation: isolate;
}
.squircle-card-shadow::after {
content: '';
position: absolute;
bottom: -6px;
left: 8px;
right: 8px;
height: 20px;
background: linear-gradient(135deg, var(--sqc-from, #6366f1), var(--sqc-to, #8b5cf6));
border-radius: 50%;
filter: blur(12px);
opacity: 0.4;
z-index: -1;
}Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleurs (HTML — style="--sqc-from: …; --sqc-to: …;" sur .squircle-card-shadow) |
indigo → violet, rose → rouge, cyan → bleu | Les deux variables colorent la carte ET son ombre. --sqc-from sert aussi de couleur unie sous le dégradé : c'est elle qui compte pour le contraste du texte blanc. Sans variable, la carte prend #6366f1 → #8b5cf6. |
Courbure (CSS — --sqc-squircle sur .squircle-card) |
superellipse n = 4, 64 points | Pour un autre exposant, recalculez les 64 points en console avec n défini : Array.from({length: 64}, (_, i) => { const t = Math.PI + i * Math.PI / 32, c = Math.cos(t), s = Math.sin(t), e = 2 / n; return (50 + 50 * Math.sign(c) * Math.abs(c) ** e).toFixed(1) + '% ' + (50 + 50 * Math.sign(s) * Math.abs(s) ** e).toFixed(1) + '%'; }).join(', '), puis collez le résultat dans polygon(…). n = 3 est plus rond (11,7 % de surface retirée), n = 5 plus carré (5 %). |
Taille (CSS — width / height de .squircle-card et de .squircle-card-shadow) |
110 × 110 px | Changez les deux règles ensemble : la forme est en pourcentages et suit. Une carte non carrée donne une superellipse étirée (coins plus longs sur le grand côté). |
Ombre (CSS — .squircle-card-shadow::after) |
94 × 20 px, 6 px sous la carte, blur(12px), opacité 0,4 |
opacity: .6 et bottom: -10px pour une carte qui flotte davantage. Ne remettez pas de clip-path sur l'ombre : le flou serait rogné net sur la forme. |
Survol (CSS — .squircle-card:hover) |
scale(1.08) translateY(-4px), brightness(1.15), 0,4 s avec rebond |
scale(1.04) pour une grille serrée ; remplacez la courbe par ease-out pour supprimer le rebond. |
Un border-radius raccorde un côté droit à un quart de cercle : la courbure saute d'un coup de zéro à sa valeur, et l'œil voit la « cassure » au début de l'arrondi. La superellipse fait varier la courbure en continu, du milieu du côté jusqu'au coin : c'est la forme des icônes iOS et des « squircles » de Figma. Sur une carte de 110 px, le coin de la superellipse n = 4 passe à 8,8 px de l'angle sur chaque axe ; un border-radius qui passe au même point doit valoir environ 30 px, et son arc paraît alors plus mou sur les côtés. La différence se voit surtout sur les grandes tailles et les fonds unis.
Parce que chaque carte est seule dans son enveloppe .squircle-card-shadow : elle est toujours le premier enfant, ces deux sélecteurs ne trouvent jamais rien. Les couleurs viennent des variables --sqc-from / --sqc-to posées sur l'enveloppe. Vous pouvez supprimer ces deux règles sans effet visible.
Non. Le code décrit la forme dans le CSS (--sqc-squircle: polygon(…)) : rien à ajouter, aucun id à garder unique, et plusieurs copies de l'effet — ou d'autres effets de la même famille — cohabitent sans conflit dans une même page. Un clip-path: url(#squircle) qui viserait un <clipPath id="squircle"> absent de la page laisserait au contraire les cartes carrées, sans erreur visible : c'est pour cela que toute la famille des formes découpées s'en passe.
