What is the CSS Gradient Generator?
Gradients add depth to buttons, cards, hero sections and app backgrounds. Writing them by hand means juggling angles, colour stops and percentages, and every platform has its own syntax: CSS, Tailwind classes, Flutter’s LinearGradient, Android drawable XML or SwiftUI.
Build the gradient visually: choose linear, radial or conic, set the angle, click the bar to add colour stops and drag them into place. The preview and the code update as you go. Start from a preset if you want inspiration, and download the gradient as a PNG wallpaper or background image.
How to use it
- Pick a preset, or start with the default two colours.
- Choose linear, radial or conic, and set the angle or position.
- Click the bar under the preview to add a stop; drag stops to move them; select one to change its colour.
- Copy the code for CSS, Tailwind, Flutter, Android or SwiftUI, or download a PNG.
Example
Linear, 135°, #18488B at 0%, #4CB048 at 100%
background: linear-gradient(135deg, #18488B 0%, #4CB048 100%);
Features
- Three gradient types. Linear with any angle, radial (circle or ellipse) and conic, plus repeating versions.
- Draggable stops. Add, move, recolour and delete colour stops, with transparency.
- Code for every platform. CSS, Tailwind, Flutter, Android drawable XML and SwiftUI.
- Presets. A dozen ready-made gradients to start from.
- PNG download. Save the gradient as an image for slides, wallpapers or social posts.
- Fallback colour. The CSS includes a solid background colour for very old browsers.
Frequently asked questions
How do I make a gradient background in CSS?
Use background: linear-gradient(direction, colour1, colour2). For example background: linear-gradient(135deg, #18488B, #4CB048) runs diagonally from navy to green. Add percentages after colours to control where each one sits.
What does the angle mean?
In CSS, 0deg points up, 90deg points right and 180deg points down. So 90deg starts on the left and ends on the right, and 135deg runs from top left to bottom right.
How do I add a gradient in Flutter?
Use a BoxDecoration with gradient: LinearGradient(colors: [...], begin: ..., end: ...) on a Container. The Flutter tab writes this for you, including the stops.
Why does the Android code look different?
Android shape drawables support only a start, centre and end colour, and angles in steps of 45 degrees. For more stops, use a GradientDrawable in code or Jetpack Compose’s Brush.linearGradient.
Last updated · Free, no sign-up, runs in your browser.