CSS Gradient Maker
Create custom CSS gradients with up to 5 color stops, 360-degree angle control, and 3 gradient types, linear, radial, and conic. Preview gradients in real time and copy production-ready CSS code with vendor prefixes. Perfect for hero sections, buttons, backgrounds, cards, and modern web design.
CSS Gradient Maker
Create custom CSS gradients with up to 5 color stops, 360-degree angle control, and 3 gradient types, linear, radial, and conic. Preview gradients in real time and copy production-ready CSS code with vendor prefixes. Perfect for hero sections, buttons, backgrounds, cards, and modern web design.
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);How to Use the Gradient Maker
- 1Pick a gradient type. Choose Linear, Radial, or Conic from the top-left buttons. Linear goes in a straight line, Radial spreads from a center point, and Conic rotates around a center.
- 2Set the direction. For Linear, type an angle (e.g. 90 for left-to-right). For Radial or Conic, pick a position like center or top left.
- 3Click the gradient bar to add stops. Each click adds a new color point. Drag the markers left or right to change where colors blend.
- 4Edit any stop. Below the gradient bar you'll see a card for each color stop. Click one to select it, then change its color, type a hex value, or adjust the position percentage. Use the trash icon to remove a stop.
- 5Copy the CSS. When you're happy, click the copy icon next to the CSS code at the bottom. Paste it into your stylesheet and you're done.
What Are CSS Gradients?
CSS gradients are smooth transitions between two or more colors, rendered directly in the browser without images. They are resolution-independent, lightweight, and infinitely customizable, making them a cornerstone of modern web design.
Unlike background images, CSS gradients are defined entirely in code. This means they scale perfectly on any screen size, load instantly, and can be animated with transitions and keyframes. They are the go-to solution for creating depth, visual interest, and polished interfaces.
Linear vs Radial vs Conic
Linear gradients transition colors along a straight line. You control the angle, left to right, top to bottom, or any direction you choose. They are the most common gradient type, perfect for backgrounds, buttons, and hero sections.
Radial gradients radiate outward from a central point. They create a spotlight effect that draws attention to a specific area, ideal for card backgrounds, modals, and focal points.
Conic gradients rotate around a central point, like the hands of a clock. They are perfect for creating charts, color wheels, and unique decorative effects that stand out from standard gradients.
Tips for Beautiful Gradients
Keep it subtle. The best gradients are often barely noticeable. Use similar tones for a sophisticated look, or contrasting colors for bold statements.
Use 2-3 color stops. While you can add up to 5, simpler gradients often look more professional. Let the colors breathe.
Test on dark and light backgrounds. A gradient that looks stunning on white may disappear on dark mode. Always check both.
Layer with opacity. Try adding a semi-transparent gradient over a solid color for depth without overwhelming the design.