Pixeliro Logo
Pixeliro
warm

Đỏ Dung Nham đến Chanh Rừng

Một gradient phun trào — đỏ dung nham nguyên sụp đổ vào chanh rừng. Radial 135° đặt dung nham ở dưới-trái và đẩy chanh vào các góc trên-phải. Cả hai đầu chia sẻ bão hoà max, cho gradient phẩm chất 'phun trào núi lửa'. Tạo cho chiến dịch thể thao, sự kiện gaming, drop thương hiệu văn hoá trẻ nơi 'năng lượng tối đa' là yêu cầu.

Gradient đẹp sẵn sàng sử dụng trong dự án của bạn

Tùy Chỉnh Trong Editor
#radial#đỏ#chanh#ấm#núi lửa#thể thao#gaming

About this gradient

Một gradient phun trào — đỏ dung nham nguyên sụp đổ vào chanh rừng. Radial 135° đặt dung nham ở dưới-trái và đẩy chanh vào các góc trên-phải. Cả hai đầu chia sẻ bão hoà max, cho gradient phẩm chất 'phun trào núi lửa'. Tạo cho chiến dịch thể thao, sự kiện gaming, drop thương hiệu văn hoá trẻ nơi 'năng lượng tối đa' là yêu cầu.

Colour story

#EF3A00 là đỏ dung nham (HSL 15°, 100% S, 47% L) — bão hoà tuyệt đối. #30CF00 là chanh rừng (HSL 106°, 100% S, 41% L). Bão hoà 100% khớp tạo điện áp; khoảng cách hue 91° là năng lượng split-complementary ở mức tối đa. Giữa radial đọc qua cam-vàng ấm.

#EF3A00
#30CF00

Where to use it

  • →Bao bì dinh dưỡng thể thao, chiến dịch nước tăng lực, ra mắt thương hiệu fitness
  • →Poster giải đấu esports, đồ hoạ ra mắt console gaming
  • →Branding festival — sự kiện âm nhạc ngoài trời, chuỗi concert hè
  • →Drop văn hoá trẻ — skate, BMX, streetwear, collab sneaker

Design tips

  • ·Body text: đen tinh hoặc trắng tinh — thích nghi theo vùng (trắng trên đỏ, đen trên chanh)
  • ·Dùng MỘT lần mỗi trang — tiếp xúc lặp đốt cháy tác động
  • ·Ghép với typography sắc và layout dứt khoát

Mã CSS &Tailwind CSS

Copy the code below to use this gradient in your project

radial-gradient(circle, #EF3A00 0%, #30CF00 100%)

Full CSS Rule

.gradient-warm--ef3a00-30cf00--radial-135 {
  background: radial-gradient(circle, #EF3A00 0%, #30CF00 100%);
}

Color Stops

#EF3A00

0%

#30CF00

100%

CSS Sẵn Sàng

Mã CSS copy-paste tương thích đa trình duyệt

Tailwind Sẵn Sàng

Sử dụng trực tiếp với class tiện ích Tailwind CSS

Tùy Chỉnh Hoàn Toàn

Mở trong editor để điều chỉnh màu, góc và điểm dừng

Responsive

Hiển thị hoàn hảo trên mọi kích thước màn hình

Phù Hợp Cho

Phần Hero

Tạo nền hero bắt mắt cho trang đích

Nút & CTA

Làm nút nổi bật với nền gradient

Card & Overlay

Thêm chiều sâu cho card với overlay gradient nhẹ nhàng

Hiệu Ứng Text

Áp dụng gradient cho text để có typography hiện đại

Common Uses of Gradients in UI and Graphic Design

Learn how to apply CSS gradients in real-world design scenarios

UI Background

Hero sections, landing pages, and app backgrounds

Hero Background

Perfect for hero sections, landing pages, and full-screen app backgrounds. Creates visual depth and modern aesthetic.

CSS
background: radial-gradient(circle, #EF3A00 0%, #30CF00 100%);

Button Gradients

Call-to-action buttons with eye-catching gradients

Gradient buttons attract attention and improve click-through rates. Ideal for CTAs, sign-up buttons, and primary actions.

CSS
background: radial-gradient(circle, #EF3A00 0%, #30CF00 100%);

Text Gradients

Eye-catching gradient text for headlines

Gradient Text

Gradient text makes headlines pop. Works great for hero titles, feature names, and brand statements.

CSS
background-image: radial-gradient(circle, #EF3A00 0%, #30CF00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Card / Surface Gradients

Subtle gradients for cards and UI surfaces

Feature Card

Subtle gradient background

Subtle gradients add depth to cards without overwhelming. Perfect for feature cards, testimonials, and pricing tables.

CSS
background: radial-gradient(circle, rgba(239, 58, 0, 0.1) 0%, rgba(48, 207, 0, 0.1) 100%);

Border Gradients

Gradient borders for modern UI elements

Gradient Border Card

Stand out with colorful borders

Gradient borders make elements stand out. Great for input fields, cards, and featured content sections.

CSS
.gradient-border {
  background: radial-gradient(circle, #EF3A00 0%, #30CF00 100%);
  padding: 2px;
  border-radius: 12px;
}
.gradient-border > div {
  background: var(--bg-surface);
  border-radius: 10px;
}

Related Tools

Generate Palette from Gradient →Check Gradient Contrast →Explore Colors →
Generated

Related Gradient Variations

Explore harmonious variations based on your current gradient

Kelp to Twilight

Hổ phách đến Ngọc Bích

Cà Chua đến Rêu

Đỏ Thẫm đến Ngọc Bích

Lửa Lửa đến Ngọc Lục Bảo Rừng

Cánh Hoa Sang Nghệ

Kelp to Twilight

Đào đến Rêu

Từ Xanh Bích đến Hồng Nhạt

Tảo Biển Đến Hoàng Hôn

Sương Mù Đến Hoa Diên Vĩ

Đá Hồng Phấn đến Cánh Hoa Sage

Frequently Asked Questions

Everything you need to know

Làm sao để sử dụng gradient này trong dự án?

Chỉ cần sao chép mã CSS hoặc Tailwind và dán vào stylesheet. Gradient sẵn sàng sử dụng không cần thiết lập thêm.

Tôi có thể tùy chỉnh gradient này không?

Có! Nhấp "Tùy Chỉnh Trong Editor" để mở gradient trong trình chỉnh sửa trực quan, nơi bạn có thể điều chỉnh màu, góc và điểm màu.

Gradient này có miễn phí không?

Có, tất cả gradient trên Pixeliro đều miễn phí sử dụng trong dự án cá nhân và thương mại. Không cần ghi nguồn.

Gradient này có hoạt động với Tailwind CSS không?

Có! Chúng tôi cung cấp class Tailwind CSS sẵn sàng sử dụng. Bạn cũng có thể thêm màu tùy chỉnh vào tailwind.config.js.

Ready to Get Started?

Đỏ Dung Nham đến Chanh Rừng Gradient - Free, no signup required

Tùy Chỉnh Trong Editor