Skip to content
ToolsOnDuty - free online tools

CSS & Design

Build gradients, shadows, easing curves and colour palettes for the web.

Featured toolCSS & Design
Random Color Palette Generator

Generate random hex colour swatches and copy them individually or together.

Open tool
Featured toolCSS & Design
CSS Gradient Generator

Create a linear CSS gradient with a live preview and copy the CSS.

Open tool
Featured toolCSS & Design
CSS Box Shadow Generator

Design a CSS box shadow with sliders and copy the CSS.

Open tool
Featured toolCSS & Design
CSS cubic-bezier Editor

Design a cubic-bezier easing curve with a live preview and copy the CSS.

Open tool
Featured toolCSS & Design
CSS clamp() Generator

Build a fluid clamp() value for responsive type and spacing.

Open tool
Featured toolCSS & Design
Glassmorphism Generator

Create a frosted-glass effect with backdrop-filter and copy the CSS.

Open tool
Featured toolCSS & Design
Color Shades and Tints Generator

Generate a 50-900 shade scale from one colour for design systems.

Open tool
CSS & Design
Border Radius Generator

Design rounded corners with per-corner sliders and copy the CSS.

Open tool
CSS & Design
CSS Text Shadow Generator

Design a CSS text-shadow with sliders and copy the CSS.

Open tool
CSS & Design
CSS Filter Generator

Build a CSS filter with blur, brightness, contrast and more.

Open tool
CSS & Design
CSS Transform Generator

Build a CSS transform with rotate, scale, translate and skew.

Open tool
CSS & Design
Neumorphism Generator

Create soft-UI neumorphic shadows and copy the CSS.

Open tool
CSS & Design
CSS Loader and Spinner Generator

Create animated CSS loading spinners and copy the CSS.

Open tool
CSS & Design
CSS Triangle Generator

Create a pure-CSS triangle in any direction and copy the CSS.

Open tool
CSS & Design
CSS Flexbox Generator

Build a flexbox layout visually and copy the CSS.

Open tool
CSS & Design
CSS Grid Generator

Build a CSS grid layout visually and copy the CSS.

Open tool
CSS & Design
PX to REM Converter

Convert px to rem and em based on the root font size.

Open tool
CSS & Design
CSS Button Generator

Design a styled button with hover and copy the CSS.

Open tool
CSS & Design
CSS Animation Generator

Build CSS keyframe animations with a live preview and copy the CSS.

Open tool
CSS & Design
CSS Transition Generator

Build a CSS transition with a live hover preview and copy the CSS.

Open tool
CSS & Design
CSS Text Gradient Generator

Create gradient-coloured text with background-clip and copy the CSS.

Open tool
CSS & Design
Custom Scrollbar Generator

Style a custom scrollbar and copy the CSS for Chrome and Firefox.

Open tool
CSS & Design
CSS Specificity Calculator

Calculate the specificity of a CSS selector.

Open tool
CSS & Design
SVG Blob Generator

Generate random organic blob shapes as SVG and copy the code.

Open tool
CSS & Design
YouTube Brand Kit Planner

Document a channel name, tagline, three-colour palette, heading-font direction and writing voice in one compact reference.

Open tool
CSS & Design
Color Similarity Calculator

Compare two RGB hex colors using normalized Euclidean distance and a percentage score.

Open tool
CSS & Design
Color Brightness Calculator

Calculate perceived brightness, WCAG relative luminance and a readable black-or-white text recommendation.

Open tool
CSS & Design
Color Name Finder

Find the nearest built-in CSS color name to a supplied RGB hex value using color distance.

Open tool
CSS & Design
Chart Generator

Turn comma-separated labels and numeric values into a clean downloadable-style bar or line chart SVG.

Open tool

About CSS & Design

Our CSS and design tools help you craft the visual details of a website without memorising syntax, from gradients and shadows to easing curves and colour palettes. Adjust a few controls and copy the exact CSS.

They are perfect for front-end work: design a smooth linear gradient, shape a realistic box shadow, tune a cubic-bezier easing curve, or build a fluid clamp() size. Each tool shows a live preview so you can see the result before you paste it.

Everything runs in your browser, so you can experiment as much as you like, for free and in private.