Free CSS Linear Gradient Generator

Build perfect linear gradients with a visual angle picker, draggable color stops, and one-click code copy. Supports CSS, Tailwind, and SCSS output.

Understanding CSS Linear Gradients

The CSS linear-gradient() function creates a color transition along a straight line. You specify a direction or angle, followed by two or more color stops. The browser smoothly interpolates between the colors. The simplest gradient — linear-gradient(#667eea, #764ba2) — transitions from top to bottom by default.

Angle System Explained

Gradient angles start at 0° (bottom to top) and rotate clockwise: 90° goes left to right, 180° top to bottom, 270° right to left. You can also use direction keywords like to right, to bottom left, or to top right. Diagonal gradients (45°, 135°) are popular for UI backgrounds because they add visual energy without being too aggressive.

Working with Multiple Color Stops

Add more than two color stops to create rich, layered gradients. Each stop can have a percentage position: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Place two stops at the same position to create a hard edge. Stops without explicit positions are evenly distributed between their neighbors.

Create your linear gradient below.

deg
Color Stops
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

What Is the Linear Gradient Generator?

This free tool lets you build CSS linear gradients visually without writing code by hand. Set the angle with a slider or direction presets, add and position color stops on an interactive bar, and see results in real-time. The generated code is available in CSS, Tailwind, SCSS, and CSS custom property formats, each copyable with a single click. Whether you need a simple two-color background or a complex multi-stop gradient, the visual interface makes it fast and intuitive.

How to Use This Tool

Step 1: Set the angle. Use the angle slider, type a degree value, or click one of the 8 direction preset buttons to quickly set common angles like 90° (left to right) or 135° (diagonal).

Step 2: Edit color stops. Click on a color stop marker to select it and change its color. Drag stops along the bar to reposition them. Click empty space on the bar to add a new stop at that position.

Step 3: Fine-tune. Use the reverse button to flip the gradient direction. Toggle repeating mode for striped patterns. Try the randomize button for instant inspiration.

Step 4: Copy your code. Select the output format you need (CSS, Tailwind, SCSS, or CSS Variables) and click Copy Code. Paste it directly into your stylesheet.

Key Features

Precise angle control. Set gradient direction with a slider from 0° to 360°, type an exact value, or click one of 8 direction presets. The preview updates in real-time as you adjust.

Interactive color stop bar. The visual bar shows your current gradient with draggable markers. Add stops by clicking, remove them by selecting and pressing delete. Each stop displays its percentage position.

Four code output formats. Vanilla CSS for any project. Tailwind utility classes that map angles to direction classes like bg-gradient-to-br. SCSS with named variables for design systems. CSS custom properties for dynamic theming.

Preview modes. See your gradient as a full background, applied to text, on a mock card component, or as a button. This helps visualize how the gradient will look in actual UI contexts.

Understanding Gradient Angles and Directions

CSS gradient angles use a compass-like system where 0° points up (north), 90° points right (east), 180° points down (south), and 270° points left (west). The gradient line starts at the opposite side of the specified angle: a 0° gradient places the first color at the bottom and transitions upward to the last color.

Direction keywords provide a more readable alternative: to right equals 90°, to bottom equals 180°, and to bottom right equals approximately 135°. However, keyword directions differ slightly from degree values on non-square elements because keywords point toward corners or edges exactly, while degree values follow the mathematical angle.

For hero sections, 135° and 45° diagonals create dynamic visual flow. For horizontal elements like navbars, 90° (left to right) works naturally. Vertical cards benefit from 180° (top to bottom) gradients. Experimentation is the best way to find the right angle for your specific design context.

Frequently Asked Questions

How does linear-gradient() work in CSS?

The CSS linear-gradient() function creates a smooth transition between two or more colors along a straight line. You define a direction or angle and a list of color stops. The browser interpolates the colors between each stop.

What angle directions are available?

Angles go from 0° (bottom to top) through 90° (left to right), 180° (top to bottom), and 270° (right to left). You can also use keywords like 'to right', 'to bottom left'. Any degree value from 0 to 360 works.

Can I add more than two colors?

Yes. Click anywhere on the color stop bar to add new stops. Most gradients use 2-5 stops but there is no hard limit. Each stop can have a precise percentage position.

How do I create a repeating linear gradient?

Toggle the 'Repeating' option. This wraps your gradient using repeating-linear-gradient(), which tiles the color pattern to create stripes and geometric patterns.

Is this linear gradient tool free?

Completely free with no signup required. All processing happens in your browser. Create unlimited gradients and copy CSS, Tailwind, or SCSS code with one click.

How do I create a diagonal gradient?

Use angles like 45° (bottom-left to top-right) or 135° (top-left to bottom-right). The direction preset buttons provide quick access to all 8 main directions.

Related Tools

CSS Gradient Generator

All gradient types in one tool

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL

Image Compressor

Compress images to exact file sizes

QR Code Generator

Create custom QR codes