صانع تدرجات CSS
صمّم تدرجات CSS مخصصة مع ما يصل إلى 5 نقاط توقف لونية، واتجاهات متعددة، وأنواع تدرج ثلاثية, خطي، شعاعي، ومخروطي. معاينة فورية وشفرة CSS جاهزة للإنتاج. مثالي لمقاطع البطل، والأزرار، والخلفيات، والتصميم الحديث.
صانع تدرجات CSS
صمّم تدرجات CSS مخصصة مع ما يصل إلى 5 نقاط توقف لونية، واتجاهات متعددة، وأنواع تدرج ثلاثية, خطي، شعاعي، ومخروطي. معاينة فورية وشفرة CSS جاهزة للإنتاج. مثالي لمقاطع البطل، والأزرار، والخلفيات، والتصميم الحديث.
0%100%
°
1
%
2
%
3
%
@%
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.