CSS Gradient Generator
Design CSS gradients visually and copy the code in one click.
- Choose a gradient type: Linear, Radial, or Conic.
- Drag the angle slider to rotate a linear or conic gradient.
- Click a colour swatch to open the colour picker, or type a HEX value directly.
- Drag the position sliders to move each colour stop.
- Click Add Stop to insert extra colour stops, or the × button to remove one.
- Try one of the preset gradients for a quick starting point.
- Copy the finished CSS with the Copy button and paste it into your stylesheet.
Tip: Paste the CSS value directly into a background or background-image property — both work in all modern browsers.
When would you use this?
- Adding a gradient background to a hero section, button, or card.
- Creating a colour overlay on an image.
- Exploring colour combinations before committing to a design.
What is the difference between Linear, Radial, and Conic?
Linear blends colours along a straight line at a given angle. Radial blends outward from a central point in an ellipse or circle. Conic rotates colours around a central point, producing pie-chart-like effects.
How do I add a gradient with transparency?
Edit the CSS output and replace a HEX value with rgba(99, 102, 241, 0) or use the transparent keyword. All modern browsers support both.
Does the output CSS work in all browsers?
Linear and radial gradients work in all modern browsers (Chrome, Firefox, Safari, Edge) without prefixes. Conic gradients are supported in all evergreen browsers. Internet Explorer does not support conic gradients.
Can I use more than two colour stops?
Yes. Click Add Stop to insert as many stops as you like. CSS supports an unlimited number of colour stops.
JPG, PNG, WebP, or GIF? A Complete Guide to Choosing the Right Image Format
Why is a PNG screenshot sometimes ten times larger than the same image saved as JPG? When should you use WebP? Is GIF obsolete? This guide explains image compression fundamentals and gives you a clear decision framework for every situation.
Color Contrast and Accessibility: WCAG Standards, Contrast Ratio Principles, and Design Improvement Tips
Color contrast ratio is a core metric in accessible web design, affecting readability for users with low vision, color blindness, and in varied lighting conditions. This guide explains WCAG 2.1 AA/AAA levels, relative luminance calculations, and common design mistakes with practical fixes.
The Complete Color Code Guide: RGB, HEX & HSL Explained
RGB, HEX, and HSL all describe the same colors — but in completely different ways. This guide breaks down the math, the design logic, and when to use each color model, from screen design to print and accessibility.
Social Media Image Editing Workflow: Sizes, Visual Consistency, and Export Settings
Great social visuals come from process, not luck. Learn a repeatable image editing workflow that covers dimensions, composition, brand consistency, and output settings for high-performing posts.
The Complete Markdown Guide: From Basics to Real-World Applications
Markdown is the go-to lightweight markup language for writers, developers, and content creators. This guide covers everything from core syntax to advanced techniques and platform-specific applications.
How to Merge, Split, and Compress PDFs: A Complete Guide to Everyday Document Management
Need just two pages from a 30-page contract? Have five separate reports to combine before a meeting? File too large to upload? This guide walks through the four most common PDF operations — no software installation required.