CSS Tools
Free online CSS generators and tools — gradients, shadows, flexbox, grid, cubic-bezier, keyframes, clip-path, filters, transforms and minifier. Visual editors output copy-paste CSS, all in your browser.
19 free css tools — all browser-based
CSS Minifier
Compresses CSS by stripping comments and whitespace, collapsing rules onto a single line, and dropping redundant trailing semicolons.
CSS Gradient Generator
Builds linear and radial CSS gradients visually with multiple color stops, adjustable angle and stop positions, and copyable CSS output..
CSS Flexbox Generator
Visually builds flex layouts with direction, justify-content, align-items, flex-wrap, and gap controls, with a live preview of adjustable item counts and copyable CSS output..
CSS Grid Generator
Visually builds CSS grid layouts with configurable columns, rows, column-gap, row-gap, justify-items, and align-items, with a live preview of the grid items and copyable CSS output..
CSS Box Shadow Generator
Builds single or multi-layer CSS box-shadows visually with offset, blur, spread, color, and inset controls, with a live preview and copyable CSS..
CSS Text Shadow Generator
Stacks multiple text-shadow layers with independent offset, blur, and color, showing a live preview and copyable CSS.
CSS Border Radius Generator
Sets the border-radius per corner independently or links all corners for a uniform radius, with a live gradient preview and copyable CSS.
CSS Clip-Path Generator
Builds polygon, circle, and inset clip-paths from adjustable points or values with a live gradient preview and copyable CSS.
CSS Filter Generator
Generates CSS filter functions (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and drop-shadow) with live preview, combining multiple filters into a single filter property string.
CSS Transform Generator
Generates CSS transform functions (translate, rotate, scale, skew) with live preview and combines them into a single transform property string.
CSS Unit Converter
Converts a CSS length between px, rem, em, pt, %, vw, and vh, with configurable base font size and viewport dimensions..
Cubic Bezier Curve Generator
Visualizes a cubic-bezier easing curve from its control points and generates the CSS cubic-bezier() and JavaScript easing function, with a preview of the animation timing.
Keyframes Animation Generator
Generates CSS @keyframes animations from configurable from/to keyframe stops with transform and opacity interpolation, producing a ready-to-paste keyframes block and animation shorthand.
CSS Glassmorphism Generator
Builds glassmorphism CSS with live preview.
CSS Neumorphism Generator
Builds soft-UI neumorphic box-shadow pairs (raised or pressed/inset) from a background color, distance, blur, intensity (HSL lightness delta), and border radius, deriving light and dark shadow tints from the base color and showing a live preview with copyable CSS output..
CSS Spinner Generator
Generates pure-CSS loading spinners and loaders with zero JavaScript, configurable size, speed, border thickness, and color presets, outputting copy-ready CSS and a live preview, useful for prototyping loading states in React, Vue, and static sites, avoiding spinner library dependencies, and ensuring loaders render identically across browsers with no asset downloads..
CSS to Tailwind Converter
Translates CSS declarations into Tailwind CSS utility classes, matching the default scale for spacing, colors, font sizes, flexbox, grid, borders and shadows, and falling back to arbitrary-value syntax such as w-[13px] when no scale value matches, while listing declarations that have no utility equivalent so nothing is silently dropped..
CSS Specificity Calculator
Calculates CSS selector specificity as the (ID, class, type) triple defined by the Selectors Level 4 specification, counting IDs, classes, attribute selectors and pseudo-classes, elements and pseudo-elements, handling :is(), :not() and :has() by taking their most specific argument and :where() as zero, and ranking several selectors so you can see which rule wins..
Tailwind to CSS Converter
Expands Tailwind utility classes back into the CSS declarations they compile to, resolving the default spacing, color, font-size, border-radius and shadow scales, decoding arbitrary values such as w-[13px], and grouping responsive and state variants (md:, hover:, dark:) into the media queries and pseudo-class selectors they generate..
Designing with visual CSS generators
The Gradient and Box-Shadow generators give you real-time previews with copy-paste CSS output.
Flexbox and Grid generators lay out children visually and emit the exact CSS properties you need.
Animation and easing
Use the Cubic Bezier generator to design custom easing curves, and the Keyframes generator to build CSS animations visually.
Frequently asked questions
Do these CSS tools work with Tailwind?
They output plain CSS. For Tailwind, use the generated values as arbitrary values like shadow-[0_4px_8px_rgba(0,0,0,0.2)].