CSS Gradient
Visual Builder.
Create stunning linear, radial and conic CSS gradients with a visual editor. Pick colours, adjust angles, choose from 12+ presets and copy production-ready CSS in one click.
background: linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);Gradient Type
Angle: 135°
Colour Stops (2/8)
Curated Presets
How It Works
Three steps to production-ready CSS gradients.
Pick Your Colours
Add colour stops to the gradient bar. Click any stop to change its colour, or drag to reposition it.
Choose Direction
Select linear, radial or conic gradient type. Adjust the angle with the visual picker or preset buttons.
Copy CSS Code
The CSS code updates in real-time. Copy with one click and paste directly into your stylesheet or component.
The Complete Guide to CSS Gradients in 2026
CSS gradients are one of the most powerful visual tools in modern web design. They eliminate the need for background images, load instantly, scale to any resolution, and are supported by every major browser. A well-crafted gradient can transform a flat interface into a premium, immersive experience that holds attention and reinforces brand identity.
Linear Gradients
The most common type. Colours transition along a straight line at a specified angle. Use for hero sections, buttons, and card backgrounds. The angle property controls direction — 0deg is bottom-to-top, 90deg is left-to-right, 135deg is the classic diagonal.
Radial Gradients
Colours radiate outward from a centre point. Perfect for spotlight effects, glow overlays, and button hover states. The shape can be circular or elliptical, and the centre position is adjustable for off-centre effects.
Conic Gradients
Colours sweep around a centre point like a colour wheel. Ideal for pie charts, loading spinners, and decorative elements. Conic gradients are the newest addition to CSS and supported in all modern browsers since 2022.
Frequently Asked Questions
More Free Tools
60 tools being built — all free, no signup, instant results.
AI Prompt Generator
Generate expert prompts for ChatGPT, Claude, Gemini & more using RISEN, STAR, Chain-of-Thought and 4 other frameworks.
Word Counter & Readability
Instant word count, character count, readability score, reading time, keyword density and AI grammar fixer.
Meta Description Generator
Generate SEO-optimised meta descriptions for any page. Character counter included. GPT-4o powered.
Email Subject Line Tester
Score your email subject lines for open rate potential, spam triggers and emotional power words.
Hashtag Generator
Generate targeted hashtags for Instagram, TikTok, LinkedIn, YouTube & X. AI-powered 3-tier mix: popular, growing and niche hashtags.
Blog Title Generator
Generate 10 click-worthy blog titles from any topic. SEO, listicles, how-tos, curiosity hooks and more. GPT-4o powered.
Password Generator
Cryptographically secure random passwords. Custom length, symbols, numbers. Runs entirely in your browser.
QR Code Generator
Generate QR codes for URLs, WiFi, email, phone and text. Free PNG & SVG download. No signup, no expiry, 100% private.
VAT Calculator
Add or remove VAT instantly for 40+ countries. UK, EU, UAE, Australia and more. Standard and reduced rates. Invoice calculator included.
Invoice Generator
Create professional invoices in seconds. Add line items, VAT, discounts and download as PDF. Free, no signup, no watermark.
JSON Formatter
Format, validate and beautify JSON instantly. Syntax highlighting, error detection with line numbers, minify mode. 100% private.
Paraphrasing Tool
Rewrite any text with AI. 6 modes: Standard, Fluency, Formal, Academic, Creative and Shorten. GPT-4o powered, no word limit, no signup.
Grammar Checker
Check and fix grammar, spelling and punctuation with AI. Get corrected text plus explanations for every fix. GPT-4o powered, no word limit.
Text Summarizer
Summarise any text with AI. 4 modes: paragraph, bullet points, key takeaways and executive summary. GPT-4o powered, no word limit, no signup.
Case Converter
Convert text to UPPERCASE, lowercase, Title Case, Sentence case, camelCase, snake_case, PascalCase, kebab-case and more. 10 modes, instant, free.
Lorem Ipsum Generator
Generate Lorem Ipsum placeholder text instantly. Paragraphs, sentences, words or list items. HTML output included. Free, no signup, unlimited.
Cover Letter Generator
Generate a professional AI cover letter in seconds. 4 tone modes: Professional, Enthusiastic, Concise and Creative. GPT-4o powered, unlimited, no signup.
Character Counter
Count characters, words, sentences and paragraphs in real time. Live progress bars for Twitter, Instagram, LinkedIn, YouTube, TikTok and SMS limits.
Business Name Generator
AI brand architect mode — generate premium names with GoDaddy & TM checks.
YouTube SEO Elite
Generate high-ranking tags & description hooks with AI.
Email Signature Generator
Create professional HTML email signatures for Gmail, Outlook & Apple Mail. 4 templates, custom colours, social links. Free, no signup.
Colour Contrast Checker
Check your colour combinations against WCAG guidelines for AA and AAA compliance.
Favicon Generator
Generate perfect favicons from text or emoji in all standard sizes including Apple Touch constraints.
Base64 Converter
Instantly encode text to Base64 or decode Base64 strings back to text securely in your browser.
UTM Builder
Generate tracking links for your campaigns to monitor traffic perfectly in Google Analytics.