CSS Tools

CSS + preprocessor (LESS, SCSS, Sass, Stylus) tools.

49 tools · all run in your browser

Minify CSS

Minify CSS by removing whitespace and comments

CSS Beautifier

Beautify and format CSS code

CSS Formatter

Format CSS with proper indentation

CSS Pretty Print

Pretty print CSS with color coding

CSS to LESS

Convert CSS to LESS preprocessor syntax

CSS to SCSS

Convert CSS to SCSS preprocessor syntax

CSS to SASS

Convert CSS to SASS syntax

CSS to Stylus

Convert CSS to Stylus syntax

Stylus to CSS

Convert Stylus to standard CSS

Stylus to LESS

Convert Stylus to LESS syntax

Stylus to SCSS

Convert Stylus to SCSS syntax

Stylus to SASS

Convert Stylus to SASS syntax

LESS to CSS

Convert LESS to standard CSS

LESS to SCSS

Convert LESS to SCSS syntax

LESS to SASS

Convert LESS to SASS syntax

LESS to Stylus

Convert LESS to Stylus syntax

SCSS to CSS

Convert SCSS to standard CSS

SCSS to LESS

Convert SCSS to LESS syntax

SCSS to SASS

Convert SCSS to SASS syntax

SCSS to Stylus

Convert SCSS to Stylus syntax

SASS to CSS

Convert SASS to standard CSS

SASS to LESS

Convert SASS to LESS syntax

SASS to SCSS

Convert SASS to SCSS syntax

SASS to Stylus

Convert SASS to Stylus syntax

CSS Grid Generator

Generate grid-template CSS with custom cols, rows, and gap

CSS Border Builder

Build border CSS — width, style, color, radius, per-side control

CSS Text Shadow

Build text-shadow with x, y, blur, color — includes neon/retro presets

CSS Filter Builder

Chain blur, brightness, contrast, hue-rotate, saturate, sepia

CSS Transform Builder

Build transform() — translate, rotate, scale, skew, 3D rotations

CSS Glassmorphism

Generate frosted-glass UI — backdrop-filter blur + transparent bg

CSS Neumorphism

Generate soft-UI box-shadow combinations — raised, inset, and flat modes

CSS Button Styles

Generate modern button CSS — lift hover, shadow, colors, radius, padding

CSS Tooltip Builder

Build a pure-CSS tooltip from data-attr — top/bottom/left/right positions

CSS Card Builder

Elevated card with hover-lift + shadow — fully customizable

CSS Form Styler

Style inputs, textareas, selects — focus ring, accent color, radius

CSS Accordion Builder

Build a zero-JS accordion using <details>/<summary> + CSS animation

CSS Tabs Builder

Build an accessible tab bar with aria-selected styling + bottom accent

CSS Modal Builder

Native <dialog> modal with backdrop blur + entrance animation

CSS Checkbox Styler

Build a custom checkbox with CSS-only checkmark — accent & size control

CSS Switch / Toggle

Build an iOS-style toggle switch — slider moves on :checked

CSS Progress Bar

Gradient progress bar with animated shimmer — accessible

CSS Ribbon Builder

Build a corner ribbon label using clip-path — content via data-ribbon attr

CSS Avatar Builder

Circular/square avatar with initials, ring, image fallback

CSS Flip Card

3D hover-flip card using perspective + backface-visibility

CSS Dropdown Builder

Hover + focus-within dropdown — zero JS, animated

CSS Breadcrumb Builder

Navigation breadcrumb with custom separator — /, >, arrow

CSS Arrow Generator

Generate a pure-CSS arrow (up/down/left/right) using rotated borders

CSS Triangle Generator

Build a zero-element triangle using transparent borders — any direction

CSS Divider Builder

Build a horizontal rule — solid/dashed/dotted or labeled (OR, AND, etc)