CSS Gradient Generator

Design linear, radial, and conic CSS gradients with live preview

🔒 100% داخل الـ browser🆓 مجاني للأبد⚡ بدون تسجيل
ملاحظة: واجهة الأداة أدناه متاحة حالياً بالإنجليزية فقط. نحن نترجم الـ UIs تباعاً. شاهد هذه الأداة بالإنجليزية →
0%
100%

طريقة الاستخدام

  1. 1
    Pick a gradient type

    Linear, radial, or conic - the preview updates instantly.

  2. 2
    Add or move color stops

    Drag sliders to reposition, click + to add more stops, edit hex colors directly.

  3. 3
    Copy the CSS

    Grab a production-ready 'background: …' declaration.

عن CSS Gradient Generator

Free online CSS gradient generator. Create linear, radial, or conic gradients with unlimited color stops, adjust angles with a live preview, and copy production-ready CSS. Runs entirely in your browser. CSS Gradient Generator على 712 Tools يعمل بالكامل داخل الـ browser الخاص بك باستخدام APIs الأصلية لـ JavaScript - لا يرى أي server بياناتك أبداً. أي: نتائج فورية، خصوصية كاملة، ولا حدود للرفع.

سواء كنت في جلسة debugging، أو مراجعة سريعة، أو حادثة إنتاج - هذه الأداة مجانية وبلا حد للاستخدام. لا علامات مائية، ولا تسجيل، ولا إعلانات داخل الأداة.

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

What browser support do these have?

linear- and radial-gradient work in every browser released after 2013. conic-gradient needs a browser from 2020 or later.

Can I use CSS variables in stops?

Yes, but this tool uses hex for the color picker. You can search-replace hex values with var(--your-token) in the copied CSS.

How do I add multiple gradients?

Chain them in a single background property, separated by commas. This tool builds one at a time - layer them in your own CSS.

اقرأ المزيد

5 دقيقة قراءة

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

5 دقيقة قراءة

Tailwind to plain CSS: migration, extraction, and component patterns

You inherited a Tailwind codebase and want to extract a component library. Or you're moving away from Tailwind entirely. Here's how the utility classes map to real CSS.

4 دقيقة قراءة

CSS box-shadow patterns that look professional (not cheap)

A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.

4 دقيقة قراءة

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45° angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

أدوات ذات صلة

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine