All tools

Free, instant CSS, SCSS and Sass generators, converters and minifiers.

Effects

Box Shadow Generator

Multiple shadows with live preview and CSS/SCSS/Sass export.

Borders

Border Generator

Width, style and color of your border in real time.

Borders

Border Radius Generator

Simple or complex radii, corner by corner.

Colors

Gradient Generator

Linear, radial and conic gradients.

Components

Button Generator

Primary, secondary, outline, ghost and gradient buttons.

Components

Card Generator

Basic, modern, premium and SaaS cards.

Effects

Glassmorphism Generator

Frosted-glass effect with backdrop-filter.

Effects

Neumorphism Generator

Customizable soft-UI dual shadows.

Layout

Flexbox Generator

Direction, justify, align and gap, visually.

Layout

Grid Generator

CSS Grid columns, rows and gap.

Animation

Transform Generator

Translate, rotate, scale and skew.

Animation

Animation Generator

Fade, slide, bounce, scale, rotate keyframes.

Responsive

Clamp Generator

Fluid typography with clamp().

Responsive

Media Query Generator

Desktop, tablet and mobile breakpoints.

Tokens

CSS Variables Generator

Design tokens in :root, ready to use.

Tokens

SCSS Mixins Generator

Button, card, flex, grid, responsive mixins.

Colors

Color Converter

HEX, RGB, RGBA, HSL, HSLA, OKLCH, LAB.

Compilation

SCSS to CSS

Compile your SCSS to CSS instantly.

Compilation

Sass to CSS

Compile indented Sass syntax to CSS.

Compilation

CSS to SCSS

Turn flat CSS into nested SCSS.

Compilation

CSS to Sass

Convert CSS to indented Sass syntax.

Optimization

CSS Minifier

Compress your CSS and measure the savings.

Optimization

SCSS Minifier

Compress your SCSS files.

Optimization

HTML Minifier

Shrink the size of your HTML pages.

Optimization

JS Minifier

Minify your JavaScript with Terser.