A lightweight CSS module for squircles

GitHub
Codepen examples
Medium
Outline: 2px
Radius: 60px
Smooth: 0.8

How to use in CSS:

Fill
Outline
background: colormask-image: paint(squircle)background: color mask-image: paint(squircle)--squircle-radius: px--squircle-smooth: number// if you want to use property as background instead of maskbackground: paint(squircle)--squircle-fill: color // accept CSS variables
SC
AL
AB
LE

How it works

Fill
Outline
Gradient
Shadow
Image

Handle via CSS

Flexible size

Outline or background

Adjustable smoothness

Fast performance

Lightweight

Can I use it today?

Chrome, Edge, Opera

Safari. Enable by flag

Radius: 80px
Smooth: 1

Notice a bug, want to improve the module or have an idea?

Let me know in the GitHub issues or send a pull request