Css Tool

Craft beautiful gradient borders in seconds — choose colors, adjust direction, width, and radius, then copy the clean CSS code instantly. No libraries, no login required. Preview Color Stops + Add Color Stop Gradient Direction ↑ 0° ↗ 45° → 90° ↘ 135° ↓ 180° ↙ 225° ← 270° ↖ 315° Custom Angle ° Border Settings Border Width 3px Border Radius 12px Padding 20px CSS Technique background-clip (recommended) border-image Uses background-clip: padding-box with a gradient background behind — supports border-radius and all browsers. ...

linear-gradient(135deg, ...) Random Gradient Copy CSS Gradient Type Linear Radial Conic Angle ° Shape Circle Ellipse Position ↖ ↑ ↗ ← · → ↙ ↓ ↘ From Angle ° Color Stops + Add Color Stop Presets CSS Code Copy How to Use the CSS Gradient Generator Choose a gradient type at the top: Linear gradients flow along a straight line at your chosen angle. Radial gradients expand outward from a center point in a circle or ellipse shape. Conic gradients sweep around a center point like a color wheel. ...

All Pink Red Orange Yellow Green Teal Blue Purple Dark Pastel Warm Multi No gradients found. Try a different search. Customize Gradient ✕ Type Linear Radial Conic Angle 135° Color 1 at % Color 2 at % Copy CSS Click anywhere to close Copied to clipboard! Browse 100+ handpicked CSS gradient presets. Click a card to open the customizer and tweak colors, angle, and gradient type. Double-click a swatch for a fullscreen preview. Hit Copy CSS to grab the code instantly. ...