CSS generator: gradients, box and text shadows, clip paths and easing curves private workspace | FluffyBench

Gradient Angle (°) Center X (%) Center Y (%) Shape

Color stops 2 to 8

Stop 1

Choose a color

HEX

R

G

B

H

°

S

%

L

%

Position (%) Opacity (0–1)

Stop 2

Choose a color

HEX

R

G

B

H

°

S

%

L

%

Position (%) Opacity (0–1)

Offset X (px) Offset Y (px) Blur (px) Spread (px)

Color

Choose a color

HEX

R

G

B

H

°

S

%

L

%

Opacity (0–1)

Inset

Offset X (px) Offset Y (px) Blur (px) Spread (px)

Color

Choose a color

HEX

R

G

B

H

°

S

%

L

%

Opacity (0–1)

Inset

Shape Top (%) Right (%) Bottom (%) Left (%) Corner radius (%) Radius (%) Radius X (%) Radius Y (%) Center X (%) Center Y (%)

Point 1 X (%) Y (%)

Point 2 X (%) Y (%)

Point 3 X (%) Y (%)

Point 4 X (%) Y (%)

Point 5 X (%) Y (%)

Point 6 X (%) Y (%)

Point 7 X (%) Y (%)

Point 8 X (%) Y (%)

Point 9 X (%) Y (%)

Point 10 X (%) Y (%)

Point 11 X (%) Y (%)

Point 12 X (%) Y (%)

X1 Y1 X2 Y2

Preview

Background

Preview background

HEX

R

G

B

H

°

S

%

L

%

Base

Preview foreground

HEX

R

G

B

H

°

S

%

L

%

CSS

1

0 UTF-16 code units · 1 line

Everything stays on this device. Privacy policy