Skip to content
AppKitly

Gradient Generator

Build smooth linear or radial gradients for app backgrounds, buttons and store graphics, then copy the CSS in one click.

Settings

Gradient type
135°

Colors

  1. 0%
  2. 100%

Presets

CSS code

background: #6366f1;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

How to use the Gradient Generator

  1. Choose a linear or radial gradient.

  2. Pick up to five colors and set where each one starts.

  3. Set the angle, or the shape and center of a radial gradient.

  4. Copy the CSS and paste it into your stylesheet.

Features

  • Live preview

    See every change immediately in a large preview.

  • Up to five colors

    Add colors and set the position of each one along the gradient.

  • Presets and random

    Start from a curated preset, or let the tool suggest a random gradient.

  • Ready-to-use CSS

    The code includes a solid color fallback line before the gradient.

Frequently asked questions

How do I use the gradient on my website?

Copy the CSS and paste it into the rule for your element. The first line sets a solid color for very old browsers, the second line sets the gradient.

Can I use the gradient in an Android or iOS app?

Yes, use the same colors and angle. On Android you can use a gradient drawable or a Brush in Jetpack Compose, and on iOS a LinearGradient in SwiftUI.

What is the difference between linear and radial gradients?

A linear gradient changes color along a straight line at the angle you choose. A radial gradient spreads out from a center point as a circle or an ellipse.

How many colors can a gradient have?

This tool supports two to five colors, which covers almost every design.

Related guides

Learn more about the store requirements behind this tool.

Related tools

Other free tools that help with the same release.