Skip to content
Esc

↑↓ to move Enter to open/ anywhere to search

مولّد تدرجات CSS

Pick colors, move the stops and set the angle to design a gradient, then copy the ready-to-use CSS. Add up to six colors and choose linear or radial. Use it for website backgrounds, buttons and banners.

يعمل في متصفحك. ملفاتك لا تغادر جهازك أبدًا.

النوع
°
0%
100%
CSS
background: linear-gradient(135deg, #1768e0 0%, #0f9a8a 100%);

كيف يعمل

  1. 01Choose linear or radial and set the angle.
  2. 02Pick your colors and move the stops.
  3. 03Copy the CSS.

أسئلة

Can I use more than two colors?

Yes. Add up to six color stops.

Does the CSS work in all browsers?

Yes. Linear and radial gradients are supported by all modern browsers.

Is my file uploaded to a server?

No. Everything happens inside your browser on your own device. Your files are never sent to us or anyone else.

Is it free?

Yes. It is free to use, with no signup, no watermark and no daily limit.

مزيد من الأدوات