Generate 135deg three-stop linear gradient
Input
Example output
/* Fallback background color */
background-color: #3b82f6;
/* Modern standard CSS gradient */
background-image: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);CSS Gradient Generator & Inspector
Color & CSS100% Client-SideReady
TEXT
0 lines0 chars
0 B / 9.8 KB
Previewlinear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)
Preview
linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)Read-only
0 lines0 chars
0 B
About this tool, examples & FAQ
Design and export modern CSS3 linear, radial, and conic gradients with multi-stop color controls, degree angle presets, fallback colors, and Tailwind utility classes.
Key facts
| CSS specification | W3C CSS Images Module Level 3 & Level 4 (§3 Gradients) |
|---|---|
| Supported gradient types | linear-gradient(), radial-gradient(), and conic-gradient() |
| Tailwind CSS integration | Generates copyable Tailwind arbitrary value classes (e.g. bg-[linear-gradient(...)]) |
| Max input size | 10 KB |
| Execution deadline | 1 s |
| Processing location | Browser-only: gradient calculation runs locally in a Web Worker |
How to use
- Select your desired gradient type: Linear, Radial, or Conic.
- Adjust gradient angle (0° to 360°) for directional linear and conic gradients.
- Enter color stops with optional positions (e.g. '#3b82f6 0%, #8b5cf6 50%, #ec4899 100%').
- Choose export format: CSS Declarations, Tailwind CSS, or Gradient Model (JSON).
- Click 'Run' or press Ctrl+Enter to generate copy-ready CSS gradient declarations.
Example
Edge cases
Automatic color stop distribution
When position percentages are omitted from intermediate color stops, positions are calculated and distributed evenly along the gradient axis.
Legacy browser fallback generation
Automatically extracts the initial color stop to emit a solid background-color declaration for environments where CSS gradients are unsupported.
Directional keyword to degree conversion
Parses CSS direction keywords like 'to right' (90deg) and 'to bottom right' (135deg) into standardized degree angles.
How it works
- Parses incoming CSS gradient functions or color stop lists into discrete color and stop records.
- Calculates angles, radial shapes (circle vs ellipse), or conic starting angles.
- Formats modern standard CSS3/CSS4 gradient syntax alongside solid fallback colors.
- Exports Tailwind CSS arbitrary value utility classes formatted with proper underscore replacements.
Related workflows
Color Code Converter (HEX, RGB, HSL, HSV, CMYK)
Convert colors across HEX, RGB, HSL, HSV, CMYK, and CSS color strings with alpha channel and WCAG luminance support.
Color Palette Generator & Contrast Checker
Generate harmonious color palettes (monochromatic, analogous, complementary, triadic) and check WCAG 2.1 AA/AAA contrast ratios against background colors.
CSS Unit Converter (PX, REM, EM, %, PT)
Convert CSS typography and layout units between pixels (px), rem, em, points (pt), and percent (%) with configurable root and parent font sizes.
Frequently asked questions
What is a CSS gradient?
A CSS gradient is a synthetic image created by the browser that displays smooth progressive transitions between two or more specified colors. Because gradients are treated as images, they are applied via the background-image property.
How do I use this gradient in Tailwind CSS?
Select the 'Tailwind CSS' operation. It generates an arbitrary value class such as bg-[linear-gradient(135deg,#3b82f6_0%,#8b5cf6_50%,#ec4899_100%)] where spaces are encoded with underscores according to Tailwind syntax rules.
Are my color values sent to any external server?
No. All gradient math, parsing, and code generation executes strictly in your browser via a client-side Web Worker.
References
- W3C CSS Images Module Level 3: Gradients — Official W3C specification defining linear and radial gradient syntax and color interpolation
- W3C CSS Images Module Level 4: Conic Gradients — Standard specification establishing conic-gradient() rotational color transitions