CSS Tools
CSS generators and preprocessor converters.
Pick a background color with opacity and get HEX, RGBA, and HSLA CSS.
Build background-image CSS: size, position, repeat, overlay gradient.
Generate border CSS for all sides or each side with a live preview.
Round corners visually and copy the border-radius shorthand.
Design layered box shadows with offsets, blur, spread, and inset.
Make boxes user-resizable with resize, overflow, and size limits.
Design a CSS button with hover state and copy the HTML and CSS.
Create frosted-glass cards with backdrop-filter blur and transparency.
Drag a cubic-bezier() easing curve and preview the animation.
Generate random organic SVG blob shapes and CSS border-radius blobs.
Compile LESS to CSS in your browser with the official LESS compiler.
Compile SCSS to CSS with Dart Sass, expanded or minified.
Compile indented Sass syntax to CSS with Dart Sass.
Compile Stylus to CSS in the browser, expanded or minified.
Convert CSS to nested LESS with grouped selectors.
Convert flat CSS to nested SCSS with & pseudo-classes.
Convert CSS to clean, nested Stylus without braces.
Convert LESS variables, mixins, and guards to SCSS.
Convert LESS to indented Sass syntax with mixins and variables.
Convert LESS stylesheets to Stylus syntax.
Convert SCSS to LESS, including @for, @each, and @if.
Convert SCSS braces syntax to indented Sass syntax.
Convert SCSS variables, mixins, and loops to Stylus.
Convert indented Sass syntax to SCSS with braces.
Convert indented Sass to LESS variables, mixins, and guards.
Convert indented Sass to Stylus syntax.
Convert Stylus to LESS, including bare variables and mixins.
Convert Stylus to SCSS with $variables and @mixin.
Convert Stylus to indented Sass syntax.