CSSCraft

Generate pixel-perfect CSS visually. Box shadows, gradients, border radius, filters — live preview, copy clean CSS instantly.

🔒 100% Client-Side 🌑 Box Shadow 🌈 Gradient ⬛ Border Radius 🔲 Filter ⚡ Flexbox

Shadow Settings

Horizontal4px

Vertical4px

Blur10px

Spread0px

Opacity40%

Color

Inset

Element

BG Color

Width140px

Height100px

Element

Gradient Type

Type

Angle135°

Color Stops

Gradient Preview

Corners

Link all

Top-Left8px

Top-Right8px

Bottom-Right8px

Bottom-Left8px

Unit

Element

BG Color

Width160px

Height120px

Element

CSS Filters

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

preview

Flex Container

direction

justify-content

align-items

flex-wrap

gap8px

Items

Count4

flex-grow0

flex-shrink1

Text Shadow

Horizontal2px

Vertical2px

Blur4px

Color

Opacity50%

Text Style

Size36px

Color

BG

CSSCraft