Documentation

How CSSToolBox works

Everything you need to know about using the tools, understanding output formats, and getting the most out of the generators.

The basics

Every tool on CSSToolBox follows the same pattern: adjust controls on the left panel, see the result instantly in the preview area, then copy the generated code from the output block at the bottom.

1
Adjust the controlsUse sliders, colour pickers, dropdowns and toggles in the left panel to shape your CSS.
2
Watch the live previewThe preview area updates in real time — no submit button needed.
3
Copy the outputClick any Copy button to copy the generated CSS to your clipboard.
4
Paste into your projectOutput is clean, minimal CSS — paste it directly into any stylesheet or component.
Tip: Most tools have a Reset button that returns all controls to their defaults. Useful if you've gone too far down a rabbit hole.

Output formats

Depending on the tool, output is available in one or more formats:

Raw CSS CSS variables Bootstrap classes Tailwind classes SVG markup HEX / RGB / HSL JSON SCSS variables

Tools that support multiple frameworks (gradients, shadows, grids) have a framework switcher in the top-right of the page. Switch between CSS, Bootstrap and Tailwind tabs to get the appropriate output.

Note: The Tailwind output uses utility class names from Tailwind v3. If you're using v4 with arbitrary values, the raw CSS output may be more useful.

Dark / light mode

Click the / icon in the top-right navigation bar to toggle between dark and light mode. Your preference is saved in localStorage and remembered across sessions.

If the icon is not visible, ensure your browser is loading assets from cdn.jsdelivr.net (Bootstrap Icons CDN). Check your browser's network tab if icons are missing across the site.

Gradient tools

Three gradient generators are available — one per framework:

CSS Gradient
Linear, radial and conic gradients with multi-stop colour controls and angle picker.
Open tool
Bootstrap Gradient
Bootstrap 5 gradient utilities and custom CSS overrides.
Open tool
Tailwind Gradient
from-*, via-* and to-* utility classes with responsive prefix support.
Open tool

Colour stops

All gradient tools support multiple colour stops. Use the + Add Stop button to insert additional stops. Drag stops on the gradient bar to reposition them. Each stop has an independent colour picker and position control.

Shadow tools

CSSToolBox has dedicated shadow generators for box shadows, text shadows and Bootstrap shadows:

Tip: In the box shadow generator, click the + icon to stack multiple shadow layers. Complex shadows are built by combining 2–4 layers with different offsets and blur values.

Grid generators

The CSS Grid Generator lets you define grid-template-columns, grid-template-rows, and gap visually. Click any cell in the preview to assign it to a named grid area.

The Bootstrap Grid Generator uses the familiar 12-column system. Expand any column row to configure its width per breakpoint (xs → xl) and set offsets independently.

The Tailwind Grid Generator outputs grid-cols-* and gap-* utilities with responsive prefix selectors.

Color tools

The color section contains five tools:

  • Color Picker — full HEX/RGB/HSL/HSB converter with WCAG contrast ratios and shade scale
  • Color Generator — generate full palettes (complementary, analogous, triadic) from a base colour
  • Color Blender — interpolate between two colours across RGB, HSL, OKLab and LCH spaces
  • All CSS Colors — searchable reference of all 148 named CSS colours
  • Image Color Extractor — upload an image and extract dominant colours using k-means clustering (browser-only, no upload)

Shape tools

Border Radius Generator — control all 8 corner values (top-left horizontal/vertical, etc.) independently. Use the preset buttons for pill, circle and squircle shapes.

Blob Maker — generates organic SVG shapes using Catmull-Rom splines. The Complexity slider controls the number of control points; Contrast controls how irregular the shape is. Export as SVG, CSS border-radius approximation or base64 data URL.

Outline Generator — three modes: native CSS outline, box-shadow ring (follows border-radius), and multi-ring stacker for layered focus effects. Includes WCAG-compliant focus ring presets.

Text tools

Text Shadow Generator — multiple shadow layers with individual colour, blur and offset controls. Presets for neon glow, retro, emboss and 3D effects.

Text Effects Studio — 12 CSS-only text effects using background-clip: text, -webkit-text-stroke, layered shadows and CSS filters. Preview text is fully editable — type your own heading to see exactly how it will look.

Colour palettes

Seven themed colour palettes are available as reference pages: Nature, Neon, Ocean, Sunset, Retro, Forest and Ice. Each palette contains 20 named colours organised into shade families.

Every colour has one-click copy for HEX, RGB and CSS variable format. The CSS variables export block at the bottom of each palette generates a complete :root { } block ready to paste.

Framework outputs

Tools that support multiple frameworks use a colour-coded tab switcher:

  • ■ Amber — Raw CSS output
  • ■ Purple — Bootstrap 5 output
  • ■ Teal — Tailwind CSS output

Switching the tab regenerates the output code for that framework. The preview stays the same — only the code changes.

Keyboard shortcuts

ActionShortcut
Copy code outputCtrl + C (after clicking output)
Toggle dark/light modeClick in nav
Reset tool controlsClick Reset button in sidebar
Randomize (blob, palettes)Click Randomize button

FAQ

Is CSSToolBox free?

Yes, completely. No account required, no paywalls, no feature limits.

Do I need to install anything?

No. Everything runs in your browser. No npm install, no dependencies.

Does the Image Extractor upload my photos?

No. Image processing happens entirely in your browser via the Canvas API. Your image never leaves your device.

Can I use the generated CSS in commercial projects?

Yes. The CSS you generate is yours to use in any project, commercial or personal.

A tool is broken / not working correctly

Please use the contact form to report bugs. Include your browser name and version, the tool name, and what you expected vs what happened.

Can I request a new tool?

Absolutely — send us a message. Tool ideas from real developers are how this project grew in the first place.