Searchlight
Tools
BlogAbout
Free SEO Audit
Back to home
๐Ÿ“ˆSEO & Analytics
๐Ÿ—‚๏ธText & Data
๐Ÿ”Encoders & Decoders
โšกGenerators
UUID GeneratorPassword GeneratorLorem IpsumRandom GeneratorBarcode GeneratorFake Data GeneratorColor PaletteGradient GeneratorBox Shadow Builder.htaccess Generatorrobots.txt BuilderMeta Tag GeneratorCSS Filter Generator
๐Ÿ”„Converters
๐Ÿ–ผ๏ธImage Tools
๐Ÿ“„PDF Tools
๐Ÿ’ปCode Tools
๐Ÿ”Regex & Parsing
๐ŸงฎCalculators
๐Ÿ—บ๏ธDiagrams
๐ŸŒNetwork & Web
โœ๏ธText Utilities
๐ŸŽจColor Tools
๐Ÿ”€Diff & Compare
148+ tools. OAuth is read-only.
Searchlight

148+ free SEO, developer, image, PDF, and productivity tools - no account needed.

Free ยท all tools included
Company
  • Blog
  • About
  • Free SEO Audit
Legal
  • Privacy Policy
  • Terms of Service
  • Cookie Policy

ยฉ 2026 Searchlight. All rights reserved.

Read-only OAuth ยท No data reselling ยท Completely free

Gradient Generator

Build CSS linear and radial gradients with live preview and one-click copy.

Type
Angle - 135ยฐ
Color stops
0%
100%
CSS Output
background: linear-gradient(135deg, #3b5bff 0%, #ff6a1a 100%);

About this tool

Create beautiful CSS linear, radial, and conic gradients with a visual editor. Pick colours, set the angle, add multiple colour stops, and copy the generated CSS gradient code ready to paste into your stylesheet. Includes a library of curated gradient presets for quick inspiration.

How to Create a CSS Gradient

  1. 1Choose a gradient type: Linear, Radial, or Conic.
  2. 2Add colour stops by clicking 'Add Stop' and picking colours.
  3. 3For linear gradients, adjust the angle using the degree input or dial.
  4. 4Preview the gradient in the live canvas.
  5. 5Click 'Copy CSS' to copy the gradient code for your stylesheet.

Frequently Asked Questions

How do I create a CSS gradient?+
Use the CSS background property with the gradient function: background: linear-gradient(135deg, #ff6a1a, #7c5cff). This tool generates the correct syntax for you.
What is the difference between linear and radial gradients?+
A linear gradient transitions colours along a straight line at a specified angle. A radial gradient radiates outward from a centre point in a circle or ellipse.
Can I use gradients as borders in CSS?+
Not directly with border-color. Use background-clip and a pseudo-element trick, or use the border-image property: border-image: linear-gradient(...) 1.
How do I make a gradient text effect in CSS?+
Use background: linear-gradient(...) on the element, then apply background-clip: text and -webkit-background-clip: text. Note: gradient text is considered decorative-heavy - use sparingly.
Looking for a deeper guide on this topic? Browse the Searchlight blog.
Visit the blog โ†’

Related tools

View all Generators โ†’
UUID GeneratorUUID v4 bulk generator - formats & copy allPassword GeneratorConfigurable rules, strength meterLorem IpsumGenerate placeholder text by paragraphs, sentences, or wordsRandom GeneratorRandom numbers, strings, arrays