The Tool Hive LogoThe Tool Hive

Tools

Network Tools

Text Tools

Data Tools

Design Tools

Development Tools

Code Tools

Security Tools

Utility Tools

About

Categories

  1. Home
  2. Tools
  3. Design Tools
  4. Gradient Generator
The Tool Hive Logo

The Tool Hive

A comprehensive collection of free, browser-first tools for developers. Network requests only occur when a tool makes them explicit.

Tools

Text ToolsData ToolsDesign ToolsNetwork ToolsDevelopment Tools

Resources

AboutPrivacy PolicyTerms of Service

Contact Us

Having any issues? Wish to request a tool or feature? Contact us here.

Email Us

© 2026 The Tool Hive. All rights reserved.

PrivacyTermsCookies

Gradient Generator

Create beautiful CSS gradients with a visual editor. Customize colors, direction, and type to generate linear, radial, and conic gradients.

Presets

Start from a curated palette, then tweak to taste.

Layers

1

Live preview

Output

CSS

background: linear-gradient(120deg, #F6D365 0%, #FDA085 100%);

Raw gradient

linear-gradient(120deg, #F6D365 0%, #FDA085 100%)

Tailwind (arbitrary value)

bg-[linear-gradient(120deg,_#F6D365_0%,_#FDA085_100%)]

Colour stops

2

Click the bar to add · drag handles to move · double-click to remove · arrows nudge (⇧ = 10)

Colour

Hex

Position %

Opacity

100%

Type & angle

Angle

deg

Repeating