CSS & Frontend Tools

CSS Gradient Generator

Create linear and radial gradients with live preview.

Need help?

Angle 135°

Color Stops

Preset Gradients

background: linear-gradient(135deg, #4d9fff 0%, #7ef7ff 100%);

Box Shadow Generator

Create CSS box shadows with live preview on dark and light backgrounds.

Need help?

Offset X4px

Offset Y8px

Blur24px

Spread-4px

Opacity40%

Color Inset

Flexbox Playground

Experiment with all flexbox properties and see the result instantly.

Need help?

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

Generated CSS

Color Picker & Converter

Pick a color and get HEX, RGB, HSL, and more formats instantly.

Need help?

Shades

Tints

Preset Colors

CSS Minifier / Beautifier

Minify or beautify CSS code. See size reduction stats.

Need help?

Input CSS

Output

SVG Optimizer

Reduce SVG file size by removing unnecessary data.

Need help?

Input SVG

Remove comments Collapse whitespace Remove metadata Remove editor data Remove empty attrs

Preview Before

Preview After

Optimized SVG

Responsive Breakpoints

Reference and generate media queries for Tailwind, Bootstrap, or custom breakpoints.

Need help?

CSS Property to wrap in media queries