25 tools · 100% free · open-source friendly

The CSS toolbox for developers & designers

Generate, convert and optimize your CSS, SCSS and Sass in seconds. Real-time preview, multi-format export and one-click copy — right in your browser.

Explore the tools ⚡ Try Box Shadow
⚡ Real-time 📋 1-click copy 🌙 Dark mode 🔒 100% local
25Free tools
3Formats: CSS · SCSS · Sass
0Sign-up required
100%In the browser

Generators

Visual CSS generators

Build your styles with the mouse and get clean, production-ready code.

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.

Converters

Converters & colors

Move from SCSS to CSS, CSS to SCSS/Sass, and convert your colors across every modern format.

Colors

Color Converter

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

 Compilation

SCSS → CSS

Compile your SCSS to CSS instantly.

 Compilation

Sass → CSS

Compile indented Sass syntax to CSS.

 Compilation

CSS → SCSS

Turn flat CSS into nested SCSS.

 Compilation

CSS → Sass

Convert CSS to indented Sass syntax.

Optimization

Minifiers

Shrink your CSS, SCSS, HTML and JS files for faster sites.

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.
⚡

Fast & frictionless

No install, no sign-up. Open a tool, tweak, copy.

🔒

Private by design

Everything runs client-side. Your code never leaves your machine.

🎨

Multi-format export

Every generator exports to CSS, SCSS and Sass with clean syntax.

🌙

Built for devs

Dark mode, polished design, quick copy: a UX made for your workflow.

Ready to speed up your CSS?

25 free tools are waiting. Start with the most popular one.

Open the Box Shadow Generator