CSS Gradient Generator

What does the CSS Gradient Generator do?

The CSS Gradient Generator creates linear and radial CSS gradients and vector SVG gradient tags. It features a live canvas preview, interactive angle direction slider (0° to 360°), unlimited multi-color stop controls, popular design presets (Ocean Blue, Sunset Flame, Cyberpunk, Emerald Fresh, and Radial Glow), and instant zero-click auto-conversion to standard CSS background: linear-gradient(...) and SVG <linearGradient> markup.

Core Concepts

Understanding CSS gradient math:

• Linear Gradient Angle: Specifies the transition trajectory in degrees (0deg = bottom to top, 90deg = left to right, 135deg = top-left to bottom-right, 180deg = top to bottom).
• Radial Gradient Shape & Position: Defines circular or elliptical transitions radiating from a central focal point (center, top left, etc.).
• Color Stops & Offsets: Percentage positions (0% to 100%) that define where each color begins blending with adjacent hues.
• SVG <linearGradient> Vector Mapping: Converts angular CSS degrees into 2D vector coordinate percentages (x1, y1, x2, y2) for inline SVG shapes and illustrations.

How to use the tool?

1. Select Type & Angle: Choose Linear or Radial mode and rotate the direction angle slider.
2. Configure Color Stops: Pick stop colors and position percentages, or click + Add Stop for multi-stop gradients.
3. Copy Code: Grab the generated CSS background declaration or SVG vector tags with a single click.

Related Developer Utilities

If you work with CSS design tokens, web styling, and UI components, explore these complementary tools:

• HEX to RGB & HSL Converter: Convert hexadecimal color codes into RGB, HSL, and CMYK formats.
• RGB & RGBA to HEX Converter: Convert CSS rgb() and rgba() strings into 6-digit and 8-digit HEX codes.
• CSS Box Shadow Generator: Generate smooth multi-layer drop shadows and elevation depth.
• CSS Minifier: Minify and compress CSS stylesheets to reduce bandwidth and load times.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/css/gradient-generator) to programmatically generate CSS gradient rules and SVG gradient definitions for automated asset pipelines.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/css/gradient-generator \
  -H "Content-Type: application/json" \
  -d '{
    "type": "linear",
    "angle": 135,
    "stops": [
      { "color": "#3b82f6", "position": 0 },
      { "color": "#10b981", "position": 100 }
    ]
  }'

Python

import requests

url = "https://blueutils.com/api/css/gradient-generator"
payload = {
    "type": "linear",
    "angle": 135,
    "stops": [
        {"color": "#3b82f6", "position": 0},
        {"color": "#10b981", "position": 100}
    ]
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "type": "linear",
                "angle": 135,
                "stops": [
                    { "color": "#3b82f6", "position": 0 },
                    { "color": "#10b981", "position": 100 }
                ]
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/css/gradient-generator"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "type": "linear",
  "angle": 135,
  "stops": [
    {
      "color": "#3b82f6",
      "position": 0
    },
    {
      "color": "#10b981",
      "position": 100
    }
  ],
  "cssGradient": "linear-gradient(135deg, #3b82f6 0%, #10b981 100%)",
  "backgroundDeclaration": "background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);",
  "fullRule": "background-color: #3b82f6;\nbackground-image: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);",
  "fallbackColor": "#3b82f6",
  "svgSnippet": "<linearGradient id=\"blueutils-gradient\" x1=\"15%\" y1=\"15%\" x2=\"85%\" y2=\"85%\">\n  <stop offset=\"0%\" stop-color=\"#3b82f6\" />\n  <stop offset=\"100%\" stop-color=\"#10b981\" />\n</linearGradient>"
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid gradient configuration: must provide valid type, angle, or stops array."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to generate CSS Gradients?

Integrating the Gradient API into build pipelines, banner generation microservices, or AI agents provides key benefits:

• Automated OpenGraph & Social Banner Rendering: Automatically generates smooth, multi-stop CSS and SVG gradient backgrounds for dynamic social share cards and OG images.
• AI Agent Styling & UI Generation: Enables AI agents to construct mathematically valid multi-stop linear and radial gradient backgrounds with matching SVG vector elements.
• Design Token Automation: Compiles theme brand color stops into normalized CSS, SCSS mixins, and vector assets during static site build steps.

Native Usage

How to generate CSS linear gradients and SVG vector definitions programmatically across environments:

Node.js (JavaScript)

// Calculate CSS linear gradient and SVG <linearGradient> programmatically
function generateLinearGradient(angle, stops) {
  const stopsCss = stops.map(s => `${s.color} ${s.position}%`).join(', ');
  const css = `linear-gradient(${angle}deg, ${stopsCss})`;
  
  const rad = (angle - 90) * (Math.PI / 180);
  const x1 = Math.round(50 + Math.cos(rad + Math.PI) * 50);
  const y1 = Math.round(50 + Math.sin(rad + Math.PI) * 50);
  const x2 = Math.round(50 + Math.cos(rad) * 50);
  const y2 = Math.round(50 + Math.sin(rad) * 50);
  
  const svgStops = stops.map(s => `  <stop offset="${s.position}%" stop-color="${s.color}" />`).join('\n');
  const svg = `<linearGradient id="grad" x1="${x1}%" y1="${y1}%" x2="${x2}%" y2="${y2}%">\n${svgStops}\n</linearGradient>`;
  
  return { css: `background: ${css};`, svg };
}

const stops = [{ color: '#3b82f6', position: 0 }, { color: '#10b981', position: 100 }];
console.log(generateLinearGradient(135, stops));

Windows (PowerShell Script)

# Programmatically compute multi-stop linear gradient string
$stops = @(
    @{ color = "#3b82f6"; position = 0 },
    @{ color = "#10b981"; position = 100 }
)
$stopsFormatted = ($stops | ForEach-Object { "$($_.color) $($_.position)%" }) -join ', '
$cssDeclaration = "background: linear-gradient(135deg, $stopsFormatted);"
Write-Host $cssDeclaration

Python

import math

def generate_linear_gradient(angle_deg, stops):
    stops_css = ", ".join(f"{s['color']} {s['position']}%" for s in stops)
    css_rule = f"background: linear-gradient({angle_deg}deg, {stops_css});"
    
    rad = math.radians(angle_deg - 90)
    x1 = round(50 + math.cos(rad + math.pi) * 50)
    y1 = round(50 + math.sin(rad + math.pi) * 50)
    x2 = round(50 + math.cos(rad) * 50)
    y2 = round(50 + math.sin(rad) * 50)
    
    stop_tags = "\n".join(f'  <stop offset="{s["position"]}%" stop-color="{s["color"]}" />' for s in stops)
    svg_tag = f'<linearGradient id="grad" x1="{x1}%" y1="{y1}%" x2="{x2}%" y2="{y2}%">\n{stop_tags}\n</linearGradient>'
    
    return {"css": css_rule, "svg": svg_tag}

stops = [{"color": "#3b82f6", "position": 0}, {"color": "#10b981", "position": 100}]
print(generate_linear_gradient(135, stops)["css"])

Java

import java.util.List;
import java.util.stream.Collectors;

public class GradientGenerator {
    record ColorStop(String color, int position) {}

    public static String createLinearGradient(int angleDeg, List<ColorStop> stops) {
        String stopsFormatted = stops.stream()
            .map(s -> s.color() + " " + s.position() + "%")
            .collect(Collectors.joining(", "));
        return "background: linear-gradient(" + angleDeg + "deg, " + stopsFormatted + ");";
    }

    public static void main(String[] args) {
        List<ColorStop> stops = List.of(
            new ColorStop("#3b82f6", 0),
            new ColorStop("#10b981", 100)
        );
        System.out.println(createLinearGradient(135, stops));
    }
}