CRX id
bbbikigdnimnpbappkkpbehcimbilack
bbbikigdnimnpbappkkpbehcimbilack
Description from extension meta
Create and customize beautiful CSS gradients effortlessly.
Image from store
Description from store
This extension simplifies the process of creating custom CSS gradients, making it an ideal tool for developers, designers, or anyone who wants to add a professional touch to their projects. You can choose gradient directions, pick specific colors, or let the extension generate random color combinations for you. With real-time previews and instant CSS code generation, this tool makes it easy to design stunning backgrounds without manually writing any code.
The user-friendly interface offers flexibility in customizing gradients to match any design. Whether you need a simple gradient or a complex mix of colors, this extension makes it quick and efficient. Once the gradient is generated, the CSS code is displayed and ready for you to copy with just one click.
**Features:**
- Select gradient directions (top, bottom, left, right, diagonal)
- Pick custom colors or generate random color combinations
- Real-time gradient preview
- Instant CSS code generation
- One-click copy to clipboard functionality
---
**User Guide:**
1. **Selecting Gradient Direction:**
- In the “Direction” section, use the dropdown menu to select your preferred gradient direction. Options include horizontal, vertical, and diagonal gradients (e.g., Top, Right, Bottom, Left, and their corners).
- The selected direction will be applied instantly to your gradient preview.
2. **Choosing Colors:**
- Under the “Colors” section, you will see two color pickers. Use these to choose your gradient’s starting and ending colors.
- The gradient will update in real-time to reflect your choices.
3. **Generating Random Colors:**
- If you’re feeling creative or need inspiration, click the “Refresh Colors” button. The extension will generate a random pair of colors for you, which you can further tweak.
4. **Previewing the Gradient:**
- The preview box at the top of the interface shows your gradient in real-time, allowing you to see how the colors and direction look together before copying the code.
5. **Copying the CSS Code:**
- Once you're happy with the design, the CSS code for the gradient is displayed in the text area below the gradient preview.
- Simply click the "Copy Code" button, and the CSS code will be copied to your clipboard for easy use in your project.
6. **Using the Code:**
- After copying the CSS code, paste it directly into your website's CSS file or style section. The gradient will be applied as a background to any element you choose.