🎨 Design Tools

← Back to Home

Pick colors and get their values in multiple formats (HEX, RGB, HSL).

Pick a Color:

Or Enter HEX Color:

HEX

#667eea

RGB

rgb(102, 126, 234)

RGBA

rgba(102, 126, 234, 1)

HSL

hsl(231, 76%, 66%)

Create beautiful CSS gradients with live preview.

Gradient Type:

Angle: 90°

Color 1:

Color 2:

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Create CSS box shadows with a visual preview.

Horizontal Offset:

0px

Vertical Offset:

10px

Blur Radius:

25px

Spread Radius:

0px

Shadow Color:

Opacity:

0.3

box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);