Free tool · copy-ready CSS
CSS Gradient Generator
Design a gradient by eye, then copy the CSS for backgrounds, buttons or headings.
Gradient heading text
CSS
Colour stops
Presets
Designing a new look?
Get a modern website built around your brand.
From colours and gradients to layout and motion, I design and build websites that look current and load fast.
Gradient tips
- Two or three colours look cleanest. Pick neighbours on the colour wheel for a calm blend.
- Keep text readable: check your heading colour against both ends of the gradient with the contrast checker.
- Subtle wins: a gradient between two close shades often looks more premium than a rainbow.
Frequently asked questions
Do CSS gradients work in all browsers?
Linear and radial gradients work in every modern browser. Conic gradients work in all current versions of Chrome, Edge, Firefox and Safari. The generated code includes a solid background colour as a fallback.
Are gradients better than background images?
For simple colour blends, yes: a gradient is a few bytes of CSS instead of a downloaded image, so it loads instantly and stays sharp at any size.
How do I add a gradient to text?
Use the "Text" option: it outputs the background-clip code that fills text with the gradient, popular for hero headings.
How do I use this in WordPress or Elementor?
Paste the background line into Additional CSS for a class, or use Elementor's Gradient background with the same colours and angle.
More design tools
Color Palette & Contrast Checker
Build colour palettes from one colour or a photo, and check text contrast against WCAG.
Social Share Image Maker
Design 1200×630 share images for Facebook, LinkedIn and X, plus Instagram sizes.
Image Cropper
Crop, rotate and flip images to any shape, with presets for social media.
Blob & Shape Generator
Make organic blobs, stars, rounded polygons and flowers. Download SVG or PNG, or copy the CSS.
Section Divider Generator
Create wave, curve, slant and zigzag dividers between website sections, with copy-ready code.
CSS Clip-path Generator
Cut images and boxes into any shape by dragging points, with presets and copy-ready CSS.
Box Shadow Generator
Design soft, layered, glow and neumorphism shadows and copy the CSS.
CSS Button Generator
Design buttons with colours, gradients, borders and hover effects. Copy the HTML and CSS.
SVG Optimizer
Shrink SVG files from Illustrator, Figma or Inkscape, with a before and after preview.
Favicon from Text or Emoji
Make a favicon from your initials or an emoji, with ICO, SVG and PNG files.
Logo Badge & Seal Maker
Design round, shield, hexagon and seal badges with your text. Download PNG or SVG.