Free CSS Tools for Developers

What is CSS Toolkit?

CSS Toolkit is a free collection of online tools built for frontend developers and designers who write CSS every day. Every tool on this site runs entirely in your browser: no account, no server processing, no data collection. You open a tool, use it, copy the output, and get back to building.

The tools cover the most common repetitive tasks in CSS workflows: unit conversion, shadow and radius generation, animation building, fluid sizing, text truncation, and selector testing. Instead of doing mental math or writing values by trial and error, you get a visual interface with instant live output.

Our tools

PX to REM and REM to PX Converter

The PX to REM converter works in both directions: it converts pixel values to rem, and rem values back to pixels, based on a configurable root font size. It supports single value conversion and bulk input either way, paste a list of px values to get rem equivalents, or a list of rem values to get px equivalents. Useful for migrating a legacy stylesheet from px to a rem-based design system.

PX to EM and EM to PX Converter

The PX to EM converter works in both directions: it converts pixel values to em, and em values back to pixels, relative to a parent font size that you specify. Since em is context-dependent, this tool lets you set the exact parent font size so the conversion reflects your actual component tree rather than a generic default.

CSS Box Shadow Generator

The CSS box shadow generator gives you a visual interface to build CSS box shadows with sliders for horizontal offset, vertical offset, blur radius, spread radius, and color with opacity control. You can add multiple shadow layers and see the combined effect live. The output is a ready-to-copy CSS declaration.

CSS Border Radius Generator

The CSS border radius generator lets you control each corner of an element independently: top-left, top-right, bottom-right, bottom-left, with live visual feedback. Supports both uniform and asymmetric radius values including the elliptical slash syntax for advanced shapes.

CSS Text Shadow Generator

The CSS text shadow generator produces CSS text-shadow values with visual controls for offset, blur, color, and opacity. Supports multiple stacked shadow layers for glow effects and 3D text styles.

CSS Animation Generator

The animation generator lets you create CSS keyframe animations by selecting preset effects or building custom ones. Configure duration, easing, delay, iteration count, and fill mode with a live preview. Outputs both the @keyframes block and the animation shorthand property.

CSS Filter Generator

The CSS filter generator lets you build both filter and backdrop-filter effects visually: adjust blur, brightness, contrast, saturation, grayscale, sepia, hue-rotate, and invert, then toggle on a drop-shadow layer. Switch to backdrop-filter mode for frosted-glass card effects, start from a preset, and copy the finished CSS.

CSS Gradient Generator

The gradient generator creates smooth color transitions with a visual interface for defining stop points, angles, and positions. Supports both linear and radial gradients with real-time preview and CSS output.

CSS Line Clamp Generator

The line clamp generator builds the CSS needed to truncate text after a set number of lines with an ellipsis, using -webkit-line-clamp alongside the standard line-clamp property so it works across every current browser. Switch the output to Tailwind to get the matching line-clamp utility class instead.

CSS clamp() Calculator

The clamp() calculator works out the fluid formula behind a responsive font-size, padding, or gap value. Set a minimum and maximum size along with the viewport widths they apply at, and it calculates the exact clamp() declaration in px or rem, with a live preview you can scrub through any viewport width.

CSS Clip-Path Generator

The clip-path generator builds polygon, circle, ellipse, inset, and curve shapes with a visual editor: drag points directly on the preview, or adjust sliders for the simpler shapes. Preview against a gradient or your own uploaded image, then copy the CSS clip-path value or an equivalent SVG clipPath, with an optional -webkit- prefix.

CSS Flexbox Generator

The flexbox generator helps you design one-dimensional layouts visually, with controls for row/column direction, alignment, wrapping, and gap. Copy the generated CSS or utility classes for Tailwind and Bootstrap instantly.

JWT Decoder and Encoder Online

The JWT decoder splits a JSON Web Token into its header, payload, and signature, then displays the decoded contents in a readable format. Switch to encode mode to build and sign your own token with HS256, HS384, or HS512. Everything runs client-side: the token never leaves your browser. Useful for debugging authentication issues without needing a separate tool or server.

CSS nth-child Tester & Generator

The nth-child tester lets you type any CSS :nth-child expression, a number, odd, even, or an+b formula, and immediately see which items in a list would be selected. Helpful for understanding complex patterns before writing them into a stylesheet.

CSS Anchor Positioning Playground

Drag an anchor element to visually place a tooltip or popover with position-area, preview automatic fallbacks, and copy the ready-to-use CSS instantly.

Landing Page Builder

The landing page builder allows you to create responsive landing pages by dragging and dropping sections and elements onto a canvas. You can style them visually and export the resulting HTML and CSS instantly.

Why use CSS Toolkit?

Frequently asked questions