Gradient Background Generator for Elementor

Design perfect linear and radial gradients for your web projects. Mix up to 5 colors, set exact angles or focal points, and instantly copy production-ready CSS straight to your clipboard.

CSS Output

Copy and paste this code in the Custom CSS field of the container.

90°

Colors (2/5)

Key Features

  • Up to 5 Colors: Layer multiple stops for complex blends or keep it minimal with two.
  • Linear & Radial Modes: Control precise angles (0-360°) and focal points (center, top-left, etc.).
  • Mobile-Friendly: Easily rearrange your color order with intuitive up/down arrows.
  • Precision Control: Pick colors visually or type exact HEX codes for brand accuracy.
  • Instant Export: One-click copy for cross-browser compatible CSS, pre-wrapped in a selector block.

How to Use

  1. Choose Style: Select Linear or Radial.
  2. Add Colors: Click + to add color stops. Set your colors using HEX inputs or the picker.
  3. Adjust Flow: Slide percentages to dictate blends. Use arrows to reorder colors.
  4. Set Direction: Tweak the angle slider or select a radial origin point.
  5. Copy & Paste: Click Copy CSS and paste it directly into your container’s custom CSS field.

If you don’t have Elementor Pro, you can still use this! Instead of pasting it into the container’s Custom CSS, give your container a CSS Class (e.g., my-gradient), change selector in the generated code to .my-gradient, and paste it into WordPress Appearance > Customize > Additional CSS.