مولّد التدرّجات اللونية في CSS

كيفية استخدام هذه الأداة

1. 1

   Click the Color 1 swatch and choose your starting color from the native color picker.

2. 2

   Click the Color 2 swatch and choose the color the gradient fades into.

3. 3

   Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.

4. 4

   Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.

ما هو مولّد التدرّجات اللونية في CSS؟

حالات الاستخدام الشائعة

• Creating a hero section or landing page banner background that fades between two brand colors.

• Generating button and card backgrounds with a subtle two-tone diagonal fade.

• Producing a gradient overlay placed above a photo to improve text contrast.

• Prototyping color direction quickly by dragging the angle slider before committing to final values.

• Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.

• Teaching or demonstrating how gradient angle changes the visual direction of a fade.

الأسئلة الشائعة