PromptBase
🤖 GPT
This prompt allows you to generate CSS code for designing a specific element or component on a website or application.
You can customize the prompt by filling in details for the element or component to be designed, its function or task, and the specific design requirements.
By using variables in the CSS code, you can make the design easily customizable and reusable for future projects.
...more
$3.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Over 1 month ago
Prompt Details
Model
Completion - GPT-3.5 (text-davinci-003)
Token size
75 ($0.00150 / call)
Example input
Element=Button
Task=Should change color on hover
Requirement 1=Gradient background
Requirement 2=Arial font
Requirement 3=Box shadow
Example output
/* Variables */
$button-gradient-start: #b6c5f7;
$button-gradient-end: #a9bef9;
$button-font-color: #ffffff;
$button-shadow-color: #000000;
/* Button Design */
.button {
background: linear-gradient(to bottom, $button-gradient-start, $button-gradient-end);
font-family: Arial;
font-size: 14px;
color: $button-font-color;
border: none;
padding: 8px 16px;
box-shadow: 0px 2px 4px $button-shadow-color;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $button-gradient-end;
}
}