0%
100%
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

Related Tools

Continue your work with these tools. Each opens in a new tab.

Color Extract Image Color Palette ExtractorFind colors in an image for your next design.Image Compressor Image Compression & ConversionAdjust image size and format before sharing.Encoder Base64 · URL Encoder/DecoderConvert text to Base64 or URL-encoded form.
Browse all tools →

📐 CSS Gradient Generator Guide

The EVEDAYS CSS Gradient Generator is a free visual gradient tool for web designers and front-end developers. Combine colors in real-time to instantly generate beautiful CSS gradient code and copy it. Supported gradient types: • Linear: The most common gradient connecting two points in a straight line. Angle can be freely set from 0° to 360°. • Radial: A circular gradient spreading from the center outward. Effective for adding depth to buttons and card backgrounds. • Conic: A gradient where colors change by rotating around a center point. Used for creating pie charts and color wheels. Key features: • Multiple color stops: Add two or more colors to create complex gradients. • Position control: Fine-tune each color stop position (%) with sliders. • Presets: Apply popular gradient combinations with one click. • Randomize: Generate random color combinations when inspiration is needed. • Live preview: All changes are instantly reflected in the preview.

🎨 Usage Tips

• Website hero sections: Using a linear gradient as a background gives a modern, sophisticated first impression. • Button hover effects: Applying different gradients for default and hover states creates an interactive feel. • Text gradients: Used with background-clip: text, you can apply gradients to text. • Card borders: Applying gradients to border-image creates elegant borders. • Loading animations: Applying animation to a conic gradient creates a spinning loading indicator.

💡 FAQ

Q. Do gradients work in older browsers? A. linear-gradient and radial-gradient are supported in all modern browsers including IE10+. conic-gradient is supported in Chrome 69+, Firefox 83+, and Safari 12.1+. Q. How many color stops can I add? A. There is no technical limit, but 2-5 stops are recommended for readability and performance. Q. Can I use the generated code commercially? A. Absolutely. CSS gradient code is not subject to copyright, so you can use it freely.