AI Prompt Library: Code

See How AI Can Write Custom Code, CSS & HTML

Last Updated: November 1, 2023
Content based
Css
From scratch
Generative
JavaScript
Animation
Background
Box delivery
Brainstorming
Business development
Button
Chat
Clock
Customer Service
Description
Digital Art
eCommerce
Form
Gradient
Handmade
Help Center
Hover
Illustration
Isometric
Marketing
Marketing strategy
Target
Text
Title
Vector
3D
Surreal
Shape divider
CTA
Mask effect
Scrolling effect
Newsletter
Star rating
Wireframe
Counter
Video
Confetti
Icon Box
Carousel
Social Icons
Divider
Css
Pro
Animation, Background, Button

Gradient animation on background button

Create a three color animated background on class .elementor-button. 45deg from #ff0909 to #ffc3a0 to #ffd8b1, in 5 seconds and infinity. Make it smooth.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: November 1, 2023
Css
Pro
Animation, Button, Hover

Button’s icon rotates and text moves on hover

Make a smooth rotate transform of 360deg with a transition of 0.8s on the button icon when hovering on the entire button. At the same time move the position of the button text 5px to the right, with a transition of 0.8s when hovering on the entire button. Add a smooth transition after removing the hover state.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: February 20, 2024
Css
Pro
Animation, Button, Hover

Button’s icon grows and text moves on hover

Make a smooth scale transform of 1.5 with a transition of 0.5s on the button icon when hovering on the entire button. At the same time move the position of the button text 8px to the right, with a transition of 0.5s when hovering on the entire button. Add a smooth transition after removing the hover state.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: February 20, 2024
Css
Pro
Animation, Background

Three solid colors animated background

Create a three solid color background animation. Start with background color #fc8e4e, then background color #ffc3a0 and then background color #ffafbd. Stay 2 seconds on each color. Make it smooth with fade effect.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: November 1, 2023
Css
Pro
Animation, Background, Gradient

Three gradient colors animated background

Create a three color animated background. From #ff0909 to #ffc3a0 to #ffd8b1, in 5 seconds and infinity. Make it smooth.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: November 1, 2023
Css
Pro
Gradient, Text

Text gradient on specific words

Add a gradient background under the text in span tag of this title. The gradient should be from #CE00A1 to #C81111.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Add an HTML <span> tag around the text you want to affect with this prompt. Like that: Add Your <span>Heading Text</span> Here

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: November 5, 2023
Css
Pro
Form

Design Acceptance checkbox of Form widget

Transform the checkbox input with the class .elementor-acceptance-field to look better visually. Give to the checkbox a width and height of 25 pixels, vertical alignment to middle, change accent-color property to black and give space of 8 pixels on the right.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: November 5, 2023
Css
Pro
Text

Two fonts in same heading

Change font family to “Playfair Display” for words wrapped with span.

Copy Prompt
Before proceeding, click ‘Notes’
Prompt Copied
NOTES
Notes:

Add an HTML <span> tag around the text you want to affect with this prompt. Like that: Add Your <span>Heading Text</span> Here

Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!

Last Updated: November 5, 2023

Discover a World of Possibilities with AI

Elementor AI

Non-refundable, try it free on any Elementor Website. Compatible with Elementor 3.13 and higher.
By purchasing Elementor AI, you agree to our AI Terms & Conditions

The above prices do not include applicable taxes based on your billing address. Unless otherwise specified, prices are in USD. The final price will be displayed on the checkout page. All plans renew annually at list price.

The price above includes Israeli VAT based on your billing address.

What do you think of this prompt?

Prompt Title

How do Elementor AI credits work?

Your plan gives you an annual amount of credits to spend on the mix of prompts you want to enter. These are the credits needed for each type of prompt you write.

The Starter Plan enables you to annually generate up to 24K text entries or 24K code snippets or 725 image requests, or 600 Container prompts, or any mix.

The Power Plan enables you to annually generate up to 50K text entries or 50K code snippets or 1,500 image requests, or 1250 Container prompts, or any mix.

The Visionary Plan enables you to annually generate up to 100K text entries or 100K code snippets or 3,000 image requests, or 2,500 Container prompts, or any mix.